状态:data中的属性需要共享给其他vue组件使用的部分(即data中需要共用的属性)
1、初识vuex直接来个小demo
下面操作都是基于vue-cli，如果不了解先学习下vue-cli
利用npm包管理工具，进行安装 vuex。
npm install vuex --save
新建一个vuex文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。
import Vue from ‘vue‘;
import Vuex from ‘vuex‘;
使用我们vuex，引入之后用Vue.use进行引用。
Vue.use(Vuex);
通过以上操作，vuex就算引用成功了
直接来个demo，在vue-cli的src目录下新建一个文件夹vuex,并在此文件夹下新建一个store.js文件;直接上demo
现在我们store.js文件里增加一个常量对象
const state={
count:1
}
用export default 封装代码，让外部可以引用。
export default new Vuex.Store({
state
})
新建一个vue的模板，xxx.vue。在模板中我们引入我们刚建的store.js文件，
并在模板中用{{$store.state.count}}输出count 的值。
<template>
<div>
<h2>{{msg}}</h2>
<hr/>
<h3>{{$store.state.count}}</h3>
</div>
</template>
<script>
import store from ‘@/vuex/store‘
export default{
data(){
return{
msg:‘Hello Vuex‘
}
},
store //注意要先引用下
}
</script>
在store.js文件中加入两个改变state的方法。
const mutations={
//改变state的数值
add(state){
state.count++;
},
reduce(state){
state.count--;
}
}
export default new Vuex.Store({
state,
mutations
})
在xxx.vue模板中加入两个按钮，并调用mutations中的方法
<div>
<button @click="$store.commit(‘add‘)">+</button>
<button @click="$store.commit(‘reduce‘)">-</button>
</div>
这样进行预览就可以实现对vuex中的count进行加减了
2.state访问状态对象
上面例子中 const state ，就是访问状态对象，也就是兄弟组件间的共享值。
下面是状态对象赋值给内部对象，也就是把stroe.js中的值，赋值给我们模板里data中的值
三种赋值方式：
一、通过computed的计算属性直接赋值
computed:{
count(){
return this.$store.state.count;
}
}
模板调用：{{count}}
缺点：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。
二、通过mapState的《对象》来赋值
import {mapState} from ‘vuex‘;
然后还在computed计算属性里写如下代码：
computed:mapState({
count:state=>state.count
})
三、通过mapState的《数组》来赋值
computed:mapState(["count"])
3.Mutations修改state状态
1. mutations 相当于一个对象，对象里面放的是事件类型相对应的回调函数,作用就是进行状态更改;简单理解就相当于一个事件注册
2. $store.commit() //模板中调用mutations 里面的事件函数
传值：只需要在Mutations里再加上一个参数，并在commit的时候传递就就可以了
const mutations={
add(state,n){
state.count+=n;
},
reduce(state){
state.count--;
}
}
在XXX.vue里修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10.
<p>
<button @click="$store.commit(‘add‘,10)">+</button>
<button @click="$store.commit(‘reduce‘)">-</button>
</p>
模板获取Mutations方法
实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。
例如：@click=”reduce” 就和没引用vuex插件一样。
要达到这种写法，只需要简单的两部就可以了：
在模板XXX.vue里用import 引入我们的mapMutations：
1.在模板XXX.vue里用import 引入我们的mapMutations：
import { mapState,mapMutations } from ‘vuex‘;
2.在模板的script标签里添加methods属性，并加入mapMutations
methods:mapMutations([
‘add‘,‘reduce‘
]),
3.通过上面两步后调用（注意额外参数直接写上）
<button @click="add(10)">+</button>
4.getters计算过滤操作
getters从表面是获得的意思,可以把他看作在《 获取数据之前 》进行的一种再编辑(注意模板显示getters操作后的值)
相当于对数据的一个过滤和加工,可以把它看作store.js的计算属性(类似于computed)
getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
《1》基本用法：
首先要在store.js里用const声明我们的getters属性。
const getters = {
count:function(state,getters){
return state.count +=getters.params_getter;
},
params_getter:function(){
return 1000
}
}
参数：
state :
getters : getters.xxx 来传递其他 getters 中的数据
写好了gettters之后，我们还需要在Vuex.Store()里引入
export default new Vuex.Store({
state,mutations,getters
})
在store.js里的配置算是完成了，我们需要到模板页对computed进行配置
在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，
所以要对computed属性进行一个改造。
改造时我们使用ES6中的展开运算符”…”。
computed:{
...mapState(["count"]), //相当于一个扩展
count(){
return this.$store.getters.count;
}
}
《2》用mapGetters简化模板写法：
都知道state和mutations都有map的引用方法把我们模板中的编码进行简化，我们的getters也是有的
首先用import引入我们的mapGetters
import { mapState,mapMutations,mapGetters } from ‘vuex‘;
在computed属性中加入mapGetters
...mapGetters(["count"])
5.actions异步修改状态
actions和之前讲的Mutations功能基本一样
不同点是，
1.actions 提交的是 mutation，而不是直接变更状态。
2.actions是异步的改变state状态，而Mutations是同步改变状态。
在store.js中声明actions
actions是可以调用Mutations里的方法的，在actions里调用add和reduce两个方法
以下是事件注册的两种方式：
const actions ={
addAction(context){
context.commit(‘add‘,10)
},
reduceAction({commit}){
//由于context 与 store 实例具有相同方法和属性，所以可以提交mutation
commit(‘reduce‘)
}
}
在actions里写了两个方法addAction和reduceAction，在方法体里，我们都用commit调用了Mutations里边的方法。
context：上下文对象，这里你可以理解称store实例本身。
{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
模板中的使用
<p>
<button @click="addAction">+</button>
<button @click="reduceAction">-</button>
</p>
改造一下我们的methods方法，首先还是用扩展运算符把mapMutations和mapActions加入
methods:{
...mapMutations([
‘add‘,‘reduce‘
]),
...mapActions([‘addAction‘,‘reduceAction‘])
}
用import把我们的mapActions引入才可以使用
import { mapState,mapMutations,mapGetters,mapActions } from ‘vuex‘;
增加异步检验
演示actions的异步功能，我们增加一个计时器（setTimeOut）延迟执行
setTimeOut(()=>{context.commit(reduce)},3000);
console.log(‘我比reduce提前执行‘);
6.module模块组(状态管理器的模块组操作)
随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。
声明模块组：
在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下：
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
声明好后，我们需要修改原来 Vuex.Stroe里的值：
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
在模板中使用:
现在我们要在模板中使用count状态，要用插值的形式写入
<h3>{{$store.state.a.count}}</h3>
如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下：
computed:{
count(){
return this.$store.state.a.count;
}
}
原文地址：https://www.cnblogs.com/changxue/p/8600775.html
时间： 2024-11-05 19:36:09