Vuex的工作流程

　　vuex的仓库有5个模块，分别是state，mutations, actions, getters, modules

　　我们将组件的公共状态定义在vuex仓库的state中,state是只读的，无法直接修改，必须调动仓库中的某个mutation才能修改状态，getters可以理解为vuex中的计算属性，当我们在某个组件中使用vuex中的某个state时，不是直接使用原值，而是需要派生出一个新的值，就可以定义getters，可以在组件中获取。

　　当依赖的state发生改变，此时getters会重新计算得到新值，同时action中可以发送异步请求，得到数据后，commit mutation来给state赋值，具体代码如下：

　　仓库代码const store = new Vuex.Store({ state: { items: []

　　// 定义一个公共的购物车数据 }, getters: { // 可以基于已有的state 派生新的状态 selectedItems (state) { // 过滤购物车中未选中的商品return state.items.filter(item => item.selected) } }, mutations: { // 定义mutation来修改state INIT_ITEMS(state, items){ state.items = items } }, actions: { // action可以发送异步请求，得到数据后commit mutation将请求结果传入，FETCH_ITEMS({commit}, params = {}){ // 调用封装好的 接口函数 fetchItem(params).then(res => { if(res.data.code === 200) { commit('INIT_ITEMS', res.data.data) } }) } } }) 组件中使用 使用vuex

　　// 获取state this.$store.state.items

　　// 直接获取 { computed: { ...mapState(['items'])

　　// 助手函数获取 } }

　　// 获取getters this.$store.getters.selectedItems

　　// 直接获取 { computed: { ...mapGetters(['selectedItems']) // 助手函数获取 } }

　　// 组件中提交action this.$store.dispatch('FETCH_ITEMS', {token: 'xxx'}) { methods: { ...mapActions(['FETCH_ITEMS']) // 助手函数 直接调用this.FETCH_ITEMS(params)触发 } }

　　// 组件中也可以直接commit mutation this.$store.commit('INIT_ITEMS'[,参数]) { methods:{ ...mapMutations(['INIT_ITEMS'])

　　// 助手函数 直接调用this.INIT_ITEMS(参数) } }

声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。