Vuex入门

    1.Vuex？

    根据文档中的描述，vuex是适用于vue.js的状态管理库,能为vue的组件中集中提供所有的状态存储与操作，让所有状态都可以预测修改。

    vuex里的四大重要的属性

    state，mutations，actions，getters

    state是定义了数据的初始结构，也可以在这里设置数据的初始值，

    2.实例化Vuex

    首先在vuex里的store.js，该vue工程想要的状态管理页面内实例化vuex，

    头文件引入

                    import Vue from "vue";

                    import Vuex from "vuex";

    然后        

                    Vue.use(Vuex);

    然后创建一个状态管理store

           

export default new Vuex.Store({

      state: {

        msg:"this is data"

        },

      mutations: {},

      actions: {},

      getters:{}

});

或者

const store = new Vuex.Store({

      state: {

        msg:"this is data"

        },

      mutations: {},

      actions: {},

      getters:{}

  }

});

export default store;

接下里在main.js里注册store

import store from "./store";

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount("#app");

    此页面创建出来的状态库，储存在state里的数据，可以在vue项目里的所有组件中共享使用，引用state里的数据直接$store.state.msg,例如在某个组件template里的div里写<div>{{$store.state.msg}}</div>这样就能在div里展示store的数据了。