什么是Vuex?

Vuex是一个专门为Vue.js应用程序开发的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以响应的规则保证状态以一种可预测的方式发生变化.

state

state里面存放的数据是响应式的，state是vuex中的基本数据，我们在没有使用state的时候，是直接在data中进行初始化的，当使用了state后，是直接将data上的诗句转移到了state上。

export default createStore({
  state: {
    arr:[]
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

mutations

是store对象的一个属性，mutations被用于更新store中存放的所有状态，通常情况先，vuex要求mutations中的方法必须是同步。

export default createStore({
  state: {
    arr:[]
  },
  mutations: {
    arrFun(state,val){
      state.arr.push(val)
    }
  },
  actions: {
  },
  modules: {
  }
})

arrFun中有两个参数
第一个参数对应的是store对象中的state，通过这个参数来修改store中所保留的变量。
第二个参数是用来传递数据。

actions

是用于处理异步的方法，需要使用context中的commit属性提交到mutations中。actions是为了通过将mutations里面处理数据的方法变成可异步的处理数据的方法。

export default createStore({
  state: {
    arr:[]
  },
  mutations: {
    arrFun(state,val){
      state.arr.push(val)
    }
  },
  actions: {
    arrFunAsync(context,val){
      context.commit('arrFun',val)
    }
  },
  modules: {
  }
})

modules

可以让每一个模块拥有自己的state、mutations、actions、getters,能够更加方便进行管理。
分模块管理：

export default {
    state: {
        arr: [],
    },
    mutations: {
        getVal(state, val) {
            state.arr.push(val)
        }
    },
    actions: {
        getValAsync(context, val) {
            context.commit('getVal', val)
        }
    },
    namespaced: true,//命名空间！！！
}

import Vue from 'vue'
import Vuex from 'vuex'
import shop from './modules/shop.js'//引入
Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        shop,//使用
    },
})

getters

是store的计算属性，对state里面的状态进行过滤处理，与组件自身的计算属性一样。

export default createStore({
  state: {
    num:10
  },
  mutations: {
    
  },
  actions: {
 
  },
  modules: {
  },
  getters:{
    func(state){
      return state.num*10;//100
    }
  }
})

简单了解vuex