什么是Vuex
VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(可以理解为 vue 组件里的某些 data )。
它采用集中式存储管理应用的全部组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vue有五个核心概念,state, getters, mutations, actions, modules。
1. state
state是Vuex的基本数据,用来存储变量
定义
export default new Vuex.Store({
state: {
count:1,
students:[
{id:110,name:"zhou",age:18},
{id:111,name:"ti",age:25},
{id:112,name:"qi",age:21},
{id:113,name:"stu",age:19}
]
}
})
调用
//通过调用$store.state来输出需要的变量
<h2>store的值:{{$store.state.count}}</h2>
<h3 v-for="item in $store.state.students" :key="item.id">
<h4>id:{{item.id}},姓名:{{item.name}},年龄:{{item.age}}</h4>
</h3>
2. getters
从基本数据(state)派生的数据,相当于state的计算属性,在index.ts(js)中在getters模块中定义计算属性,在页面中通过$store.getters.计算属性名字进行调用
定义
getters:{
//计算属性
getMyName(state){
//state参数是固定的,是指获取state的值
return state.myName+"我是计算属性啊"
},
more20stu(state){
return state.students.filter(s=>s.age>20)
},
moreAgeStu(state){
//通过返回一个方法来接收页面传来的参数
return function(age:any){
//调用数组的新特性filter,filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
return state.students.filter(s=>s.age>age)
}
}
}
调用
<div>
<h2>vue计算属性</h2>
<h3>获取计算属性的getMyName的值:{{$store.getters.getMyName}}</h3>
<h3>通过vuex的getters获取state的学生大于20岁的对象为:
{{$store.getters.more20stu}}
</h3>
<h3>
给计算属性传值需要返回一个方法接收:
{{$store.getters.moreAgeStu(22)}}
</h3>
</div>
3.mutations
mutations是提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。在 mutations定义操作state变量,在页面展示的方法中通过this.$store.commit()调用mutations里的方法,进行操作state。
定义
mutations: {
// this.$store.commit('increment')
increment(state){
state.count++;
},
incrementCount(state,count:any){
state.count+=count;
},
decrement(state){
state.count--;
}
}
调用
//在template中
<h2>store的值:{{$store.state.count}}
<h3 v-for="item in $store.state.students" :key="item.id">
<h4>id:{{item.id}},姓名:{{item.name}},年龄:{{item.age}}</h4>
</h3>
<button @click="addtion">+</button>
<button @click="subtion">-</button>
<button @click="addCount(5)">+5</button>
<button @click="addCount(10)">+10</button>
</h2>
//在<script lang="ts">中
$store: any;
addtion(){
this.$store.commit('increment')
}
addCount(count:any){
//'incrementCount需要请求mutations的方法名,count传递的参数
this.$store.commit('incrementCount',count)
}
subtion(){
this.$store.commit('decrement')
}
4.actions
action 相似于 mutation,但是用来代替Mutation进行异步操作的函数
定义
actions: {
updateName(context,payload){
setTimeout(()=>{
context.commit('updateNameInfo',payload)
},1000)
},
promiseUpdateName(context,payload){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
context.commit('updateNameInfo',payload);
resolve('成功修改');
},1000)
})
}
}
调用
//template
<div>
<h1>-----------------actions-------------</h1>
<h2>(1)通过action修改name:{{$store.state.name}}
<button @click="updateName">确定修改</button>
<button @click="promiseUpdateName">promise回调修改</button>
</h2>
</div>
//在<script lang="ts">中
updateName(){
this.$store.dispatch('updateName','我是action');
}
promiseUpdateName(){
this.$store.dispatch('promiseUpdateName','我是携带的信息')
.then((res:any)=>{
alert("action已经提交修改,并返回的参数为:"+res)
});
}
5.modules
module:可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。在module模块中,五大属性(state,getters,mutations等等)用法差不多根store的五法属性用法差不多。区别就是换地方存储操作数据。方便管理
定义
const moduleA={
state:{
moduleName:"moduleA"
},
mutations:{
updateModuleAName(state:any,payload:any){
state.moduleName=payload;
}
},
actions:{},
getters:{
fullName(state:any){
return state.moduleName+",我是moduleA的计算属性"
},
fullName1(state:any,getters:any){
//
return "通过getters参数获取计算属性的值:"+getters.fullName
},
fullName2(state:any,getters:any,rootState:any){
return "通过rootStare获取根state里的值:"+rootState.name;
}
}
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB})
调用
//template
<div>
<h1>-----------------modules-------------</h1>
<h2>moduleName:{{$store.state.a.moduleName}}</h2>
<button @click="updateModuleName">修改module名字</button>
<h2>modules的计算属性1:{{$store.getters.fullName1}}</h2>
<h2>modules的计算属性2:{{$store.getters.fullName2}}</h2>
</div>
//在<script lang="ts">中
updateModuleName(){
this.$store.commit('updateModuleAName','moduleA被 修改了')
}