vuex 的创建和基本属性和触发发方法

注意看注释 关键属性 modules state getters mutations actions

const store = new Vuex.Store({
    modules: { 
        someModaule1: {  //  模块1
            namespaced: true,
            state: {  // 状态
                count: 0
            },
            getters: {  // getters，会缓存属性
                getCount: (state, getters) => {
                    return state.someMOdaule1.count + getters.length
                }
            },
            actions: {   // 动作 ，支持异步，结果还是要触发 Mutation，  通过 store.dispatch('someModaule1/increment')触发
                increment (context,arg) {
                    console.log(arg)
                    context.commit('increment')
                } 
            },
            mutations: { // Mutation必须为同步函数，去改变state, store.commit('someMOdaule1/increment', 10)
                increment (state, n) {
                    state.count += n
                }
            },

            modules: {  // 嵌套模块
                someModaule1: {  // 继承父模块的命名空间
                    state: { ... },
                    getters: {
                        profile () { ... } // -> getters['someModaule1/someModaule1']
                    }
                },
            }
        },
        someModauleOther: {...} // 其他模块
    }
})

调用

store.dispatch('someModaule1/increment')  // 触发action
store.commit('someMOdaule1/increment', 10)   // 触发mutations

在组件中使用

大型项目通常用如下方法 mapState() mapGetters() mapActions() mapMutations()

Vue.use(Vuex)

const Counter = {
    template: `<div>{{ count }}</div>`,
    store:store, // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
    computed: {
        computed: {
            ...mapState('someModaule1', {
                'count',  // 传字符串参数 'count' 等同于 `state => state.count`  映射 this.count 为 store.someModaule1.state.count
            }),
            ...mapGetters('someModaule1',[
                'getCount',
            ])
        },
    },
    methods: {
        ...mapActions('someModaule1',[
            'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('someModaule1/increment')`
        ]),
        ...mapMutations([
            'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
        ])
    }
}

mapState和其他map快捷方法接受的类型挺多要注意

• {} 重新命名相应的属性和方法，如果不重命名建议用下面的数组简写
• [string] 字符串简写，见上面注释
• string,[string] 加命名空间的，字符串简写