1、概述

Vuex作为插件，管理和维护整个项目的组件状态。

 

2、安装vuex

cnpm i --save vuex

 

3、vuex使用

github地址：

new Vue({    el: '#app',    router: router,    //使用vuex    store: store,    render: h => {        return h(App)    }});

 

4、配置项

（1）数据：数据保存在state中。store的数据只能读取，不能改变。

（2）改变store中的数据使用mutations。组件内通过this.$store.commit来执行mutations.

（3）getters：提取过滤方法。

（4）actions：处理异步操作，组件内通过this.$store.dispatch触发。

涉及数据改变的用mutations，涉及业务逻辑的使用actions。

以上整体配置为：

//vuex的配置//注意Store是大写const store = new Vuex.Store({    //数据保存    state: {        count: 0,        list: [1, 5, 8, 10, 30, 50]    },    mutations: {        increase(state, n = 1) {            state.count += n;        },        decrease(state, n = 1) {            state.count -= n;        }    },    getters: {        filteredList: state => {            return state.list.filter(item => item < 10);        }    },    actions:{        asyncIncrease(context){            //异步 1s后执行            return new Promise(resolve=>{                setTimeout(()=>{                    context.commit('increase');                    //Promise 的一种状态Resolved（已完成）                    resolve();                },1000)            })        }    }});

 

5、组件代码

 

vuex 维护多个组件之间的公共（共有）状态！