简单vue状态管理实现

学生            代课老师        校长           财务         班主任          学生
components - > actions  ->  mutations  - >  state  < -  getters  < -  components
发送请求         处理          修改状态                   
                业务逻辑      修改state                  读取state
                异步

this.$store.dispatch()   //components与actions之间的通信
mapActions()             //components与actions之间的通信(推荐)


this.$store.commit()     //actions与mutations通信
                         //components与mutations通信(不推荐)


mapGetters()             //components与getters之间通讯(推荐)


$store.state            //components与state之间的通信(不推荐)

环境:
在vue-cli脚手架下安装vuex
在src文件目录下创建store文件夹
store中包括index.js/actions.js/getters.js/mutations.js/states.js

其中index.js文件如下
import Vuex from 'vuex';
import Vue from 'vue';
import actions from './actions'
import state from './state'
import getters from './getters'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
    actions,
    state,
    getters,
    mutations
})


states.js中存放数据,代码如下:
export default {
    count:0
}

需求如下:
点击页面中的+按钮，更改count的值并展示在页面中。

实现过程:
首先在main.js中引入并使用store
//import ...
import store from './store'     //默认会去找index.js


new Vue({
  name: 123,
  el:'#app',
  router,
  components: { App },
  template: '',
  store
})




串联关系：
1.组件App中发起数据更新请求:
     
     
{{count}}


2.在methods中通过mapActions()拿到请求并向actions传递
export default {
     methods:
            mapActions([
            'add'
            ]),
}


3.在actions.js接收到数据,在对应函数内部通过commit提交给mutaitons
export default {
    add({commit,state},payload){
        //此处拿到的参数是一个对象，里面包含commit方法，此处调用该方法可以将数据提交给mutations
        //payload表示负载，也就是组件传递过来的数据,此处的payload为1
        payload=payload || 1
        commit("increment",payload)
    }
}


4.在mutations.js中接收到请求后对states中的数据进行突变
export default {
    //mutation可以收到state，对state中的数据进行突变
    increment(state,payload){
        state.count+=payload; //数据突变
    }
}


5.getters负责获取states中的数据
export default {
    count(state){
       return state.count;
    }
}


6.在App中，通过computed绑定mapGetters(),可以向getters发送请求，获取更改后的数据并渲染页面
//此处拿到的count即为states中的count
 computed:mapGetters([
    'count'
  ])

一个简单的状态管理就实现了。

如果想在子组件中也使用count，只要在子组件中引入mapgetters并通过computed去拿数据即可