vuex使用

VueX 使用

入口文件

    import Vue from 'vue'

配置 vuex 步骤

1.运行

    cnpm i vuex -S

2.导入包

    import Vuex from 'vuex'

3.注册 vuex 到 vue 中

    Vue.use(Vuex)

4.new Vuex.Store() 实例，得到一个 数据仓储对象

    var store = new Vuex.Store({
        state: {
            count: 0
            // state 相当于组件中的 data，专门用来存储数据的
            // 如果在组件中想要访问 store 中的数据，只能通过 this.$store.state.count 来访问
        },
        mutations: {
            // 注意： 如果要操作 store 中的 state 值，只能通过 调用 mutations 提供的方法才能操作对应的数据，
            // 不推荐直接操作 state 中的数据，因为万一导致了数据的紊乱，不能快速定位到错误的原因，每个组件都可能有操作数据的方法
            increase(state) {
                state.count++;
            }
        }
        // 如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit('方法名')
        // 这种调用 mutations 方法的格式 和 this.$emit("父组件中的方法名")类似
    });

5.将 vuex 创建的 store 挂载到 VM 实例上
只要挂载到了 vm 上，任何组件都能使用 store 来存储数据

import App form './App.vue'
const vm = new Vue({
    el: '#app',
    render: c=>c(App),
    store
});