vuex是专门用来管理 vue.js 应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。
五个核心：
state： 存放状态，存储数据的地方
actions： 提交mutation，异步操作
mutations： 同步操作，只有mutations可以修改state中的数据
getters： 相当于 state的计算属性。
modules： 将store模块化，模块化 modeA，modeB，modeC
1.vuex 是单向数据流
2.只有commit()才可以触发mutations中的方法 （可以在组件中调用，也可以在actions中调用）
3.只有dispatch()才可以触发actions中的方法 （只能在组件中调用）
4.只能在mutations里修改state，actions不能直接修改state
安装
npm install vuex --save创建仓库
import Vue from 'vue' import Vuex from 'vuex' //vuex 注册给vue Vue.use(Vuex); //数据中心 let state={ count:10 } //actions 异步操作（定时器，ajax） let actions={ getsync(context,val){ //context 值得是上下文对象。 context.commit('increament',val) } } //mutations 同步修改state中的数据 let mutations={ increament(state,val){ //state指的是 state数据中心 state.count+=val; } } // getters 可以对state中的数据进行计算。（相当于组件中的computed） let getters = { newVal: (state)=> state.count*2 } //实例化 仓库 export default new Vuex.Store({ state, actions, mutations, getters }); //main.js import store from './store/index' //注入根组件 new Vue({ store, router, components:{xxxx} }) //A.vue {{this.$store.state.count}} {{this.$store.getters.newVal}} methods:{ increament(){ //两种手法 //1. 通过dispatch()触发actions中的方法修改数据 this.$store.dispatch('getSync',1) //2. 如果同步修改，通过commit()触发mutations中的方法修改。 this.$store.commit('increament',1) } }当一个组件需要多个状态时，这些状态都声明成计算属性过于冗长，于是有了辅助函数。
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex' computed:{ ...mapState({ a:"a", // "a" 指的是state中的a b:"b" }), ...mapGetters({ Val:'newVal' // 可以重新命名 }) } methods:{ ...mapActions({ getSync:'getSyncNum' }) ...mapMutations({ increament:"increament" }) } //template vue页面 {{a}} {{b}} {{getSync(1)}} <button @click='increament(1)'></button>1.状态树结构复杂的时候，可以用modules进行管理。
2.多人协同开发，可以用modules，避免命名空间冲突。
//创建store，分模块定义 const test1 ={ namespaced:true, //开启命名空间，在各组件中 ...mapState("test1",{name:"name"}) state:{name:'test1'}, actions:{}, mutations:{ changeName(state,arg){ state.name=arg; }, getters:{} } const test2 = { namespaced:true, state:{}, actions:{}, mutations:{ } }, getters:{} } new Vuex.Store({ state:{name:"root"}, actions, mutations, getters modules:{ test1, test2 } }) 在组件中使用： {{this.$store.state.name}} {{name}} {{this.$store.state.test1.name}} {{tes1Name}} computed:{ ...mapState({ name:“name" }), ...mapState('test',{ test1Name:'name' }) } methods:{ ...mapMutations('test1',['changeName']) } ...mapState("test1',['name']) ...mapState('test1',{newName:'name'}) //如果展开数组，组件中不可以重命名， //如果展开对象，可以重命名vuex刷新页面，数据丢失、清空。有时候我们需要把一些数据保存到本地，即使刷新也不能清空，例如：登陆状态、token等。这时就需要用到vuex数据持久化。
//安装 npm install vuex-persistedstate --save //使用 import createPersistedState from 'vuex-persistedstate' const state = { user:{}, } export default new Vuex.Store({ state, getters, actions, mutations, plugins:[createPersistedState({ storage: window.sessionStorage })] //会自动保存创建的状态。刷新还在 } })createPersistedState()可配置的参数
key：存储名称 所有的数据会存储到一个key里面，默认：vuex
storage：数据存储位置 默认：localStorage，也可以设置sessionStorage
