一、简介

我们来看看对Vuex比较专业的介绍：

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

简而言之，Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。

二、优点

Vuex状态管理跟使用传统全局变量的不同之处：

Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。

不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

三、步骤

1. 安装Vuex

2. npminstallvuex--save

2.引用Vuex

importVuefrom'vue'

importVuexfrom'vuex'

Vue.use(Vuex)

3.创建仓库Store

要使用Vuex，我们要创建一个实例store，我们称之为仓库，利用这个仓库store来对我们的状态进行管理。

//创建一个store

conststore=newVuex.Store({});

主要包括以下几个模块

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

Getter：允许组件从Store中获取数据，mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性。

Mutation：是唯一更改store中状态的方法，且必须是同步函数。

Action：用于提交mutation，而不是直接变更状态，可以包含任意异步操作。

Module：可以将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

Vuex的作用类似全局对象，Vuex使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

.

1. State

2. 假设我们有一个全局状态count的值为5。那么，我们就可以将其定义为state对象中的key和value，作为全局状态供我们使用。如下：

3. //创建一个store

4. conststore=newVuex.Store({

5. //state存储应用层的状态

6. state:{

7. count:5//总数：5

8. }

9. });

.

2.Getters

可以认为，getters是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的getters

getters接受state作为其第一个参数

conststore=newVuex.Store({

//state存储应用层的状态

state:{

count:5//总数：5

},

getters:{

newCount:state=>state.count*3

}

});

在组件中获取{{newCount}}方式：

exportdefault{

computed:{

newCount(){

returnthis.$store.getters.newCount;

}

}

};

.

3.Mutations

Vuex给我们提供修改仓库store中的状态的唯一办法就是通过提交mutation，且必须是同步函数

我们在mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方

会接受state作为第一个参数，第二个是自定义传参

conststore=newVuex.Store({

//state存储应用层的状态

state:{

count:5//总数：5

},

mutations:{

increment(state，value){

state.count+=value;

}

}

});

我们在提交commit时候，字符串参数increment,就是对应在mutations中的increment。

一般通过方法或钩子触发，例如：

methods:{

getVal(event){

//获取当前的按键的值

letvalue=event.target.dataset.value;

//通过commit提交一个名为increment的mutation

this.$store.commit("increment",value);

}

}

在组件中获取{{count}}方式：

exportdefault{

computed:{

count(){

returnthis.$store.state.count;

}

}

};

.

4.Action

用于提交mutation，而不是直接变更状态，可以包含任意异步操作。

只有通过action=>mutations=>states,这个流程进行操作,具体步骤如下：

exportdefaultnewVuex.Store({

//存放数据

state:{

obj:{},

},

//4.通过commitmutations中的方法来处理

mutations:{

getParam(state,Object){

    //5.修改state中的数据

state.obj=Object

}

},

//2.接受dispatch传递过来的方法和参数

actions:{

getParamSync(context,Object){

    //处理异步操作

setTimeout(()=>{

    //3.通过commit提交一个名为getParam的mutation

    //action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个mutation

context.commit('getParam',Object)

},3000)

}

}

})

然后我们就在组件里这么调用就可以了

methods:{

getVal(){

    letname='xia';

    letage='26';

    letsex='man';

    //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions

    this.$store.dispatch('getParamSync',{name,age,sex})

}

}

.

5.Modules

随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块

importVuefrom'vue'

importVuexfrom'vuex'

importstatefrom'./state'

importmutationsfrom'./mutations'

importactionsfrom'./actions'

import*asgettersfrom'./getters'

importmoduleAfrom'./module/moduleA'//模块A

importmoduleBfrom'./module/moduleB'//模块B

Vue.use(Vuex)

exportdefaultnewVuex.Store({

actions,

getters,

state,

mutations,

modules:{

moduleA,

moduleB

}

})

moduleA.js/moduleB.js文件

//每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块

exportdefault{

state:{

text:'moduleA'

},

getters:{},

mutations:{},

actions:{}

}

然后我们就在组件里这么调用就可以了

computed:{

getText1(){

    returnthis.$store.state.moduleA.text;

},

//或

    ...mapState({

        getText2:state=>state.moduleB.text;

    })

}

由此可知，模块内部的state是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。

vuex最最简单的项目实例

运用vuex语法糖mapMutations和mapGetters

1. 存储数据(a.vue文件)

2. import{mapMutations}from"vuex";//引入mapMutations

3. exportdefault{

1. methods:{

1. ...mapMutations({

1. //将changeNews与mutations中的SET_NEWS关联

1. changeNews:"SET_NEWS"

1. }),

1. submit(){

1. //提交一个名为changeNews的mutation，并传入参数val

1. letval='testnews';

1. this.changeNews(val);//相当于this.$store.commit("changeNews",val);

1. }

1. }

2. }

2. .

3. 2.获取数据(b.vue文件)

4. import{mapGetters}from"vuex";//引入mapGetters

5. exportdefault{

1. computed:{

2. //用vuex读取数据(读取的是getters.js中的数据)

3. //相当于this.$store.getters.news(vuex语法糖)

4. ...mapGetters(["news"])

1. },

1. created(){

2. //获取getters中news数据

3. console.log(this.news);

1. }

2. }

4. .

5. 3.store文件目录结构

2. index.js:

3. importVuefrom'vue'

4. importVuexfrom'vuex'

5. importstatefrom'./state'

6. importmutationsfrom'./mutations'

7. importactionsfrom'./actions'

8. import*asgettersfrom'./getters'

5. //每次修改state都会在控制台打印log

6. importcreateLoggerfrom'vuex/dist/logger'

6. Vue.use(Vuex)

1. constdebug=process.env.NODE_ENV!=='production'

2. exportdefaultnewVuex.Store({

1. actions,

1. getters,

1. state,

1. mutations,

1. strict:debug,//当debug=true时开启严格模式(性能有损耗)

1. plugins:debug?[createLogger()]:[]

2. })

2. .

3. state.js:

4. conststate={

1. news:{}

2. }

5. exportdefaultstate

2. .

3. mutations.js:

4. constmutations={

1. SET_NEWS(state,val){

1. state.news=val

1. }

2. }

2. exportdefaultmutations

1. .

2. actions.js:

3. //异步处理

4. constactions={

5. M_NEWS({commit},val){

6. commit('SET_NEWS',val);//commitmutations修改

7. }

8. }

2. exportdefaultactions

5. .

6. getters.js:

7. //通常通过getters取数据(this.$store.getters.news;)

8. exportconstnews=state=>state.news//不做其他处理直接映射出去

2. .

3. 4.使用store

4. 在main.js中引用

5. importstorefrom'./store'//vuex存储文件

2. ...

3. ...

2. newVue({

1. el:'#app',

1. router,

1. store,

1. components:{

1. App

1. },

1. template:''

2. })

2.