Vuex

import { createStore } from 'vuex'

export default createStore({
    // 存储状态（变量）
    state: {
        cacheViews: ['newTemplate', 'editTemplate'],
        todos: [
            { id: 1, text: '你好啊', done: true },
            { id: 2, text: '赛利亚', done: false }
        ],
        count: 1
    },
    // 对数据获取之前的再次编译，可以理解为 state 的计算属性，在组件中通过 this.$store.getters.xxx 使用
    getters: {
        cacheViews: state => state.cacheViews,
        changeTodos: state => state.todos.filter(todo => todo.done),
        getTodoById: state => (id: number) => {
            // 通过方法访问, 给 getter 传参, 在页面中使用 this.$store.getters.getTodoById(2); // 输出结果为: { id: 2, text: '赛利亚', done: false }
            return state.todos.find(todo => todo.id === id)
        }
    },
    // 修改状态，同步操作，在组件中通过 this.$store.commit('xxx', params) 使用
    mutations: {
        increment (state) {
            // 变更状态, this.$store.commit('increment');
            state.count++
        },
        increment2(state, payload){
            // 变更状态, this.$store.commit('increment2', 10);
            state.count += payload;
        },
        increment3(state, payload){
            // 变更状态, this.$store.commit('increment3', { amount: 10 });
            // 对象风格的提交方式 this.$store.commit({ type: 'increment2', amount: 10 });
            state.count += payload.amount;
        }

    },
    // 提交 mutation, 异步操作，在组件中通过 this.$store.dispath('xxx') 使用
    actions: {
        incrementAsync (context) {
            setTimeout(() => {
                context.commit('increment')
            }, 1000)
        },
        incrementAsync2 (context, payload) {
            setTimeout(() => {
                context.commit('increment', payload.amount)
            }, 1000)
        }
    },
    // store 的子模块，为了开发大型项目，方便状态管理而使用的，即将 store 分割为模块，使 store 对象不会太臃肿
    modules: {
        a: moduleA,
        b: moduleB
    }
})

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

computed: {
    localComputed () { /* ... */ },
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
        // ...
    }),
    ...mapGetters({
        // ...
    }),
},
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')`
    })
}