版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/luobosiji/article/details/90696216
Vuex 状态管理
运行机制
Vuex 使用
npm install vuex --saveimport Vuex from 'vuex'Vue.use(Vuex)const app = new Vue({ el: '#app', // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 //需调用 Vue.use(Vuex) store, //子组件能通过 this.$store 访问到。 })- 通过
this.$store.state.xxx来访问 - 通过
this.$store.commit('xxx',{arg})来提交修改数据操作(Mutation) - 通过
this.$store.dispatch('xxx',{arg})来进行异步修改数据操作(Action) - 通过
this.$store.getter.xxx来访问store的计算属性
store
const store = new Vuex.Store({ state: { count: 1, //响应式数据 todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation // mutation 必须是同步函数 mutations: { //应该使用常量替代 mutation 事件类型 increment (state, payload) {} }, //Action 提交的是 mutation，而不是直接变更状态 //Action 可以包含任意异步操作 actions: { //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象 increment (context) { context.commit('increment') } }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } } }) 简写形式
import { mapState } from 'vuex' import { mapGetters } from 'vuex' import { mapMutations } from 'vuex' import { mapActions } from 'vuex' //带命名空间 ...mapState('some/nested/module',{}) //命名空间辅助函数 // createNamespacedHelpers //在 `some/nested/module` 中查找 const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') computed: { ...mapState({ // 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 countPlusLocalState (state) { return state.count + this.localCount } }), //当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。 ...mapState([ // 映射 this.count 为 store.state.count 'count' ]), // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]), //如果起别名使用对象模式 ...mapGetters({ // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) }, methods: { ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)` ]), ...mapMutations({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')` }), ...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')` }) } 使用常量替代 Mutation 事件类型
// mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION' // store.js import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: { ... }, mutations: { // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名 [SOME_MUTATION] (state) { // mutate state } } }) Module
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态 命名空间 namespaced
const store = new Vuex.Store({ modules: { account: { namespaced: true, // 模块内容（module assets） state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响 getters: { isAdmin () { ... } // -> getters['account/isAdmin'] }, actions: { login () { ... } // -> dispatch('account/login') }, mutations: { login () { ... } // -> commit('account/login') }, // 嵌套模块 modules: { // 继承父模块的命名空间 myPage: { state: { ... }, getters: { profile () { ... } // -> getters['account/profile'] } }, // 进一步嵌套命名空间 posts: { namespaced: true, state: { ... }, getters: { popular () { ... } // -> getters['account/posts/popular'] } } } } } }) 转载请标明出处:Vuex
文章来源: https://blog.csdn.net/luobosiji/article/details/90696216