vuex集中式状态管理架构

vuex是一个专门为vue.js设计的集中式状态管理架构.

什么是状态?简单来说就是data中需要共用的属性.比如:我们有几个页面要显示用户名和用户等级,购物车信息,或者显示用户的地理位置.如果我们不把这些信息设置为状态,那每个页面遇到后都会到服务器进行查找计算,返回后再显示,这样很麻烦(以前是用session来存储的),所以vue作者就给我们提供了vuex。

一.先来个小demo

1.创建项目和安装vuex

vue2.9创建项目

vue init webpack vuex

安装vuex

cnpm install vuex --save

2.在src目录下创建一个vuex夹,在vuex文件夹里创建一个store.js,里面内容如下:

通过以上两步就把vuex安装好了.

3.开始我们第一个小案例,需求:就是下面有一个加的点击按钮,点击完后上面显示加的数字.

步骤如下:
a.在store,js里增加一个常量对象

const state={
			count:1
	}

这里我们定义的state就相当于状态,也就是数据管理仓库.
b.用export default 封装代码,让外部可以访问

export default new Vuex.Store({
state
})

c.在components文件夹里新建一个Count.vue组件模板,里面写法如下

<template>
    <div>
        <h2>{{msg}}</h2>
        <h3>{{$store.state.count}}</h3>
    </div>
</template>
<script>
// 引用公共仓库
import store from "@/vuex/store"

export default {
    data:function(){
        return {
            msg:"Hello Vuex"
        }
    },
    store
}
</script>
<style>

</style>

d.在router/index.js里配置一个count路由

e.在浏览器里输入count地址后,可以看到正确拿到里面的count值,效果图:

接下来我们增加两个加减的方法
f.在store.js里准备两个方法,并把这两个烦烦烦加到Vuex.Store里

const mutations={
	add(state){
	state.count++
 },
 reduce(state){
 state.count--}

}

g.在Count.vue模板里面调用即可

<p>
<button @click="$store.commit("add")">+</button>
<button @click="$store.commit("reduce")">-</button>
</p>

最终效果如下:

附官网案例:

二.state状态(将store.js的值赋值给模板里的data的三种赋值方式)

上面直接用{{$store.state.count}}来写比较难看,如何变为直接是{{count}}呢?总结了共有三种方法
第一种:通过computed计算属性直接赋值

computed:{
	count(){
	return this.$store.state.count;

 }
}

这里需要注意的是return this.$store.state.count这一句，一定要写this，要不你会找不到$store.state.count这一句，一定要写this，要不你会找不到store的。这种写法很好理解，但是写起来是比较麻烦的，那我们来看看第二种写法。
第二种:使用mapState辅助函数来赋值
a.在Count.vue里,先导入mapState

import {mapState} from "vuex";

解释:为什么mapState要加花括号?因为在vuex文件里mapState没有export default导出(默认导出只有一个,其余都要使用对象方式)

b.在计算属性里写如下代码:

computed:mapState({
count:state=>state.count//容易写错,箭头后面记得省略了{}
})

注意:这里一定要使用箭头函数,普通函数无效.
第三种:通过mapState辅助函数的数组来赋值(最简单好用)
a.在Count.vue里,先导入mapState

import {mapState} from "vuex";

b.在计算属性里写如下代码

computed:mapState(['count'])

三种方法图:

三.mutation修改状态.

1.上一节中的mutations是一个简单的修改状态的操作,现在有一个新场景,我们实际项目中经常要修改状态里的值,比如上一节,我们每次只是加1,现在要求每次加十,怎么操作呢?方法如下:
a.在store.js中,add方法再传入一个参数

2.在count页面传参即可,记住参数传递不一样:参数1是方法名(这个不一样),参数2是传递的第二个值

2.实际开发中我们也不希望@click="$store.commit(‘reduce’)"这样的写法,希望写的跟上面第二节的简洁的模板语法@click="reduce"一样.具体操作如下:思路跟上面一样
a.在count.vue中,引入mapMutations

b.用最简单数组的方法添加即可

方法写法更简单,最终实现效果与原来一样.

四.getters计算过滤操作

getters就是store.js的计算属性.

基本用法:

比如我们现在有一个需求:每次它输出前,给它加上100,具体操作如下:
1.在store.js里我们生命一个getters对象

2.添加到new Vuex.Store({})里.

3.在count.vue里进行改造,注意:在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，所以要对上节课写的computed属性进行一个改造.

简化模板
我们都知道state和mutations都有map的引用方法把我们模板中的编码进行简化,其实getters也是有的,操作如下

五.actions异步修改状态

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态.按照mutations的写法:
1.在store.js里

2.count.vue里

结果发现reduce先执行后再3秒后减1,说明mutations是同步,actions是异步修改数据.

六.module模块组

当我们项目复杂的时候,我们共享的状态越来越多,这时候我们就需要把我们状态的各种操作进行一个分组,分组后再进行按组编写.操作如下:
1.在vuex/store.js中声明模块组

2.将模块组加到new Vuex.Store({})里

3.回到count.vue模板里


最终效果跟五之前一致:

到此,vuex已完结