什么是Vuex?

个人理解：
vuex就是一个状态管理的工具，如果我们没有用vuex，那么每个组件之间的传值就只能通过存储的方式来存储。这样一旦项目大了过后就不利于数据状态的管理。所以如果我们用到了vuex那么就会方便管理很多。

引入Vuex
1.新建一个目录store，在目录下新建一个index.js文件

2.在index.js中添加以下代码：

import Vue from "vue"
import Vuex from "vuex"
//引入cart的vuex模块
import cart from "@/store/modules/cart.js"
Vue.use(Vuex)
export default new Vuex.Store({
    //当做data
    state:{
    },
    //相当于计算属性
    getters:{
    },
    //同步一些方法
    mutations:{
    },
    //存放异步的方法
    actions:{
    }
})

这里面的state就相当于data，getters相当于computed，mutations存放同步的方法，actions存放异步的方法。

3.在main.js中引入vuex

import Vue from 'vue'
import App from './App'
import store from './store'       //引入vuex
Vue.prototype.$store = store      //引入vuex
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    store,                           //引入vuex
    ...App
})
app.$mount()

上面备注引入vuex的代码就是需要添加的。
这样vuex就引入成功了。

state的多种用法

我们通常会把全局或者常用变量放在state中。我们假设一个购物的场景，当我们添加商品到购物车的时候，这时候数据就会在购物车的页面中使用，所以我们就可以将数据存放在state中。如果其它页面想要拿取，直接调用即可。
我们在state中创建一个list数组：

然后创建一个购物车的Vue页面
第一种方法
在onLoad方法中写一下代码：

console.log(JSON.stringify(this.$store.state.list));

第二种用法：
在Vue页面中引入：mapState

import {mapState} from "vuex"

在computed中添加以下代码：

...mapState({
    list:"list",
}),

onload中：

console.log(JSON.stringify(this.list));

第三种方法：
在computed中添加以下代码：

newList(state) {   //   可以进行过滤操作
        return state.list.filter(v=> v.status)
}

###
Getters的多种用法
在getters中添加以下代码：

//拿到状态为true的商品
activeList:(state)=>{
    //返回状态为true的数据
    return state.list.filter(v=>v.status)
},

onload中：

console.log(this.$store.getters.activeList);

Mutations的多种

这个存放许多的同步方法。
第一种方法：
在mutations中添加以下代码：

inc(state,n) {
            state.number += n;
            console.log(3333);
        }

onload中：

this.$store.commit('inc');

Action方法的用法

action里面存放都是异步的方法
在action中添加以下代码：

AsyncInc({commit,state},n) {
    // 定时执行
    setInterval(()=>{
        commit('inc',20)
        console.log(state.number);
    },2000)    
}

onload中：

this.$store.dispatch('AsyncInc')