关于vuex

vuex就是使用一个store对象包含全部的应用层级状态（全部数据的来源）。

 

store 的四个属性：state， getters, mutations, actions 。

分解以下：

一、State(仓库):就是存放的变量的，放在state={}对象里。可使用 mapState 辅助函数帮助咱们生成计算属性。

换句话说，整个APP的数据就是存放在 state对象里，随取随用。

 

2.getters上简单来讲就是存放一些公共函数供组件调用。须要对store中的数据进行处理，或者进行重复使用，getters能够理解为vue的计算属性。

getters获取 store当中的数据做予组件使用，可是这个属性我在项目中不是特别经常使用。我通常都是这样获取

computed: {

      ...mapGetters([

           ‘testDate'

       ])

}

 

例子：

let store = new Vuex.Store({   

     state: {

       testData: 123

    },

    getters: {       

          dateCount(state, getters) {

                let date = state.testDate;

                return `data+1`;

            }

   }

});

 

或者

let { mapGetters } from 'Vuex';

let comonent = {        

     computed: {

          ...mapGetters([

               ‘testDate'

           ])

      }

};

 

 

注：actions使用 store.commit方法触发 mutations改变 state

 

3.在vuex不能直接对state进行操做，因此须要提交mutation，mutation相似于vue的method事件。调用的时候有所差距，须要使用commit。因此 mutations 上存放的通常就是咱们要改变 state 的一些方法。

每个 mutation 都有一个字符串的事件类型和一个回调函数，一般在回调函数里进行操做，

store.commit('increment')

咱们能够把 mutations理解为“用于改变 state状态的一系列方法”。在 vuex的概念里， state仅能经过 mutation修改，这样的好处是可以更直观清晰地集中管理应用的状态，而不是把数据扔获得处都是。

 

4.mutation 像事件注册，须要相应的触发条件。而 Action 就那个管理触发条件的。Action 函数接受一个与 store 实例具备相同方法和属性的 context 对象，

所以你能够调用 context.commit 提交一个 mutation，或者经过 context.state 和 context.getters 来获取 state 和 getters。

actions的两个方法负责把数据分发到 store中供 mutation使用

 

 

学习连接： http://www.jb51.net/article/122352.htm