Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
首先 用Vue脚手架工具构建好一个项目,在控制命令行中输入下边的命令下载一个vue webpack模版
启动项目
看到这个界面,接着着手使用vuex,为了便于vuex例子更快实现,删掉 默认的一些代码。如图:
页面内容只剩下一行文字如下:
下面开始第一步:引入vuex
利用npm包管理工具,进行安装 vuex
npm install vuex --save
这里加上 –save,因为这个包在生产环境中是要使用的。
tips: -save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹。
-save是指将包信息添加到dependencies,表示你发布时依赖的包裹。
例如,我们在开发时会用到gulp来压缩我们的文件。这是我们的gulp包信息就会添加到devDependencies,我们在发布. 时发布压缩文件,并不要用到gulp。
利用nodejs构建的服务器在发布后会经常被访问用到,http包的信息就会添加到 dependencies区域。
第二步 新建一个store.js文件,文件中引入vue和vuex
import Vue from 'vue';
import Vuex from 'vuex';
第三步 使用vuex,引入之后用Vue.use进行引用。
Vue.use(Vuex);
通过这三步操作,vuex就算引用成功了
第四步 在main.js 中引入新建的vuex文件
第五步 , 在实例化 Vue对象时加入 store 对象
如图:
接下来。在store.js文件里增加一个常量对象,并用export default 封装代码,让外部可以引用
如图:
现在直接可以用{{$store.state.count}}输出count 的值,如图
如果main.js没有引入 store,报错如下:
用store 的话 必须import 如图
解决报错
在store.js文件中加入两个改变state的方法。
const mutations={
add(state){
state.count+=1;
},
reduce(state){
state.count-=1;
}
}
mutations是固定的写法,意思是改变的,要改变state的数值的方法,必须写在mutations里,然后再导出一下,如图
在HelloWorld.vue模板中加入两个按钮,并调用mutations中的方法。
这样就可以实现对vuex中的count进行加减了
state访问状态对象
state ,这个就是访问状态对象,它就是SPA(单页应用程序)中的共享值。
学习状态对象赋值给内部对象,也就是把stroe.js中的值,赋值给我们模板里data中的值。有三种赋值方式
一、 通过computed的计算属性直接赋值
computed属性可以在输出前,对data中的值进行改变,利用这种特性把store.js中的state值赋值给模板中的data值。
computed:{
count(){
return this.$store.state.count;
}
}
修改HelloWorld.vue代码, 直接可以访问count 就不用$store.state.count 写这么多长
需要注意的是return this.$store
.state.count这一句,一定要写this,要不会找不到$store的。这种写法很好理解,但是写起来是比较麻烦的,那来看看第二种写法。
二、通过mapState的对象来赋值
首先要用import引入mapState。
import {mapState} from 'vuex';
然后还在computed计算属性里写如下代码:
computed:mapState({
count:state=>state.count //理解为传入state对象,修改state.count属性
})
这里使用ES6的箭头函数来给count赋值。
computed:mapState(["count"])
这最简单的写法,在实际项目开发当中也经常这样使用。
现在已经知道这三种方法是有异曲同工之妙
接下来来看 Mutations修改状态($store.commit( ))
Vuex提供了commit方法来修改状态
在实际项目中常常需要在修改状态时传值。比如上边的例子,是我们每次只加1,而现在要通过所传的值进行相加。其实只需要在Mutations里再加上一个参数,并在commit的时候传递就就可以了。
现在store.js文件里给add方法加上一个参数n。
在HelloWorld.vue里修改按钮的commit( )方法传递的参数,传递8,意思就是每次加8.
模板获取Mutations方法
实际开发中不希望看到$store.commit( )这样的方法出现,希望跟调用模板里的方法一样调用。
例如:@click=”reduce” 就和没引用vuex插件一样。要达到这种写法,只需要简单的两部就可以了:
1、在模板HelloWorld.vue里用import 引入mapMutations:
2、在模板的<\script>标签里添加methods属性,并加入mapMutations
在模板中直接使用我reduce或者add方法,就像下面这样
<button @click="reduce">-</button>
可以看到以上两种方法是等同的
getters计算过滤操作
getters从表面是获得的意思,可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。可以把它看作store.js的计算属性。
getters基本用法:
比如我们现在要对store.js文件中的count进行一个计算属性的操作,就是在它输出前,给它加上100.我们首先要在store.js里用const声明我们的getters属性。
写好了gettters之后,还需要在Vuex.Store()里引入,代码如下,
export default new Vuex.Store({
state,mutations,getters
})
在store.js里的配置算是完成了,到模板页对computed进行配置。在vue 的构造器里边只能有一个computed属性,如果写多个,只有最后一个computed属性可用,所以要使用ES6中的展开运算符”…”。
用mapGetters简化模板写法
state和mutations都有map的引用方法把模板中的编码进行简化,getters也是有的,来看一下代码。
首先用import引入mapGetters
import { mapState,mapMutations,mapGetters } from 'vuex';
在computed属性中加入mapGetters
...mapGetters(["count"])
actions异步修改状态
actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态
在store.js中声明actions
actions是可以调用Mutations里的方法的,在actions里调用add和reduce两个方法。
const actions ={
addAction(context){
context.commit('add',10)
},
reduceAction({commit}){
commit('reduce')
}
}
在actions里写了两个方法addAction和reduceAction,在方法体里,都用commit调用了Mutations里边的方法。
ontext:上下文对象,可以理解称store本身。
{commit}:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了。
模板中的使用
需要在HelloWorld.vue模板中编写代码,让actions生效。先复制两个以前有的按钮,并改成actions里的方法名,分别是:addAction和reduceAction
演示actions的异步功能,增加一个计时器(setTimeOut)延迟执行。在addAction里使用setTimeOut进行延迟执行。
setTimeOut(()=>{context.commit(reduce)},3000);
console.log('我比reduce提前执行');
可以看到在控制台先打印出了‘我比reduce提前执行’这句话
module模块组
随着项目的复杂性增加,共享的状态越来越多,这时候就需要把状态的各种操作进行一个分组,分组后再进行按组编写。那就学习一下module:状态管理器的模块组操作。
声明模块组:
在vuex/store.js中声明模块组,还是用const常量的方法声明模块组。代码如下:
const moduleA={
state,mutations,getters,actions
}
声明好后,需要修改原来 Vuex.Stroe里的值:
export default new Vuex.Store({
modules:{a:moduleA}
})
在模板中使用
要在模板中使用count状态,要用插值的形式写入
{{$store.state.a.count}}
如果想用简单的方法引入,还是要在计算属性中retrun状态。写法如下:
computed:{
count(){
return this.$store.state.a.count;
}
},