说说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(参数)

    }

}

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