Vuex官网链接：https://vuex.vuejs.org/zh-cn/strict.html

Vuex

1. 是一个专为 Vue.js 应用程序开发的状态管理模式。
2. 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
3. Vuex 也集成到 Vue 的官方调试工具 ，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
4. 帮助我们管理新的共享状态
5. 适合于开发大型单页应用

1.开始安装

在Vue-cli架构中 nmp  i  vuex  --save

在src下新建目录vuex/store.js

2.store.js配置

import Vue from 'vue';//引入vueimport Vuex from 'vuex';//引入vuexVue.use(Vuex);//全局使用 var state={  //    count:1};var mutations={    add(state,n){        state.count+=n    },    reduce(state){       state.count--    }}export default new Vuex.Store({
   //暴露出口    state,mutations})

3.五大方法

    1.state

       用于数据管理，可以通过computed直接返出，也可以组件调用，也可以借助mapState()管理 

import Vue from 'vue';//引入vueimport Vuex from 'vuex';//引入vuexVue.use(Vuex);//全局使用var state={  //    count:1,    count1:2};export default new Vuex.Store({
   //暴露出口    state})

  2. getter

    主要用于数据的过滤，直接通过computed调用，也可以mapGetters()

import Vue from 'vue';//引入vueimport Vuex from 'vuex';//引入vuexVue.use(Vuex);//全局使用var state={  //    count:1,};var getters={    count_get(state){        return state.count+1    }};export default new Vuex.Store({
   //暴露出口    state,getters})

 3.mutations

主要用于储存公共方法

直接mapMutations()调用或者commit提交以及传值

import Vue from 'vue';//引入vueimport Vuex from 'vuex';//引入vuexVue.use(Vuex);//全局使用var state={  //    count:1,};var mutations={    add(state){        return state.count++    },    reduce(state){        return state.count--    },    xx(state,n){        return state.count+=n    }}export default new Vuex.Store({
   //暴露出口    state,mutations})

  

 

    

　　

 4.actions用于异步方法

import Vue from 'vue';//引入vueimport Vuex from 'vuex';//引入vuexVue.use(Vuex);//全局使用var state={  //    count:1,};var mutations={    add(state){        state.count+=5;        return state.count    }};var actions={    add1:function(context){        context.commit('add');        setTimeout(()=>{            state.count--        },2000)    }}export default new Vuex.Store({
   //暴露出口    state,mutations,actions})

5.modules

  对于大型项目，进行模块化分组管理，store.js可以引入多个类似于store.js的文件，在总文件进行模块化状态管理

import Vue from 'vue';//引入vueimport Vuex from 'vuex';//引入vuexVue.use(Vuex);//全局使用var state={  //    count:1,};var mutations={    add(state){        state.count+=5;        return state.count    }};var actions={    add1:function(context){        context.commit('add');        setTimeout(()=>{            state.count--        },2000)    }}var moduleA={    state,mutations,actions}export default new Vuex.Store({
   //暴露出口    modules:{a:moduleA}})