Vuex介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
调试工具
项目目录
state
在state中定义的变量，每一个Vue组件都可访问
index.js中
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
import personA from './modules/personA'
Vue.use(Vuex)
const state = {
count: 0,
students: [{
name: 'tyh',
age: 12
},
{
name: 'xys',
age: 15
},
{
name: 'qwe',
age: 17
},
{
name: 'asd',
age: 20
},
]
}
export default new Vuex.Store({
state,
mutations,
getters,
actions,
modules: {
personA
}
})
访问方式：
$store.state.count
mutations
mutations.js
mutations里面定义各种方法,组件中通过$store.commit()来提交
add() {
this.$store.commit("increment");
}
export default {
increment(state) {
state.count++
},
decrement(state) {
state.count--
},
incrementCount(state,count) {
state.count += count
},
addStudents(state,message) {
state.students.push(message)
},
updateInfo(state,name) {
state.students.filter(s => s.name == name)[0].name = 'taoyuhan'
},
addInfo(state,message) {
Vue.set(state.students[0],message.key,message.value)
},
updateM(state,obj) {
Vue.set(state.students[0],obj.key,obj.value)
}
}
getters
getters类似于组件当中的计算属性
getters.js
export default {
moreAge(state) {
return age => state.students.filter(item => item.age > age)
}
}
访问方式
<h2>{{ $store.getters.moreAge(1) }}</h2>
actions
action里面主要进行异步操作，然后异步操作完成后提交到mutations里面
actions.js
export default {
updateMessage(context,obj) {
return new Promise((resolve,reject) => {
setTimeout(() => {
context.commit("updateM",obj)
resolve("异步操作已完成")
}, 3000);
})
}
}
提交到actions的方法
通过$store.dispatch()提交到mutations里面
注意：mutations里面不能处理异步操作，异步操作全部在actions里面处理完成后再通过context.commit()提交到mutations里面
updatemessage() {
this.$store.dispatch("updateMessage",this.obj).then(res => {
console.log(res)
})
}
modules
modules里面可以分为几个模块，每个模块里面又有state,mutations…
personA.js
export default {
state: {
message: {
name: '终端',
age: '12'
},
numbers: 0
},
mutations: {
addNumbers(state) {
state.numbers++
}
},
getters: {
fullName(state) {
return state.message.name + "aaa"
}
},
actions: { //只提交给自己模块中的mutations
updateNumbers(context) {
setTimeout(() => {
context.commit("addNumbers")
}, 3000);
}
}
}
访问模块里面的message
<h1>{{$store.state.personA.message}}</h1>
提交方式不变，访问getters里面的也不变
附上App.vue的代码
<template>
<div id="app">
<div>
<h1>{{ count }}</h1>
<button @click="add">+</button>
<button @click="sub">-</button>
<button @click="addCount(5)">+5</button>
<button @click="addStudent">添加一位学生</button>
<button @click="update('tyh')">修改信息</button>
<button @click="addInfo">添加地址</button>
<button @click="updatemessage">异步修改信息</button>
<h2>{{ $store.getters.moreAge(1) }}</h2>
<h1>------------------modules---------------</h1>
<h1>{{$store.state.personA.message}}</h1>
<h1>{{$store.state.personA.numbers}}</h1>
<h1>{{$store.getters.fullName}}</h1>
<button @click="addnumbers">+</button>
<button @click="updatenumbers">延迟+</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
key: "address",
value: "wuhan",
},
};
},
computed: {
count() {
return this.$store.state.count;
},
studentInfo() {
return {
name: "uio",
age: 20,
};
},
},
methods: {
add() {
this.$store.commit("increment");
},
sub() {
this.$store.commit("decrement");
},
addCount(count) {
this.$store.commit("incrementCount", count);
},
addStudent() {
this.$store.commit("addStudents", this.studentInfo);
},
update(name) {
this.$store.commit("updateInfo", name);
},
addInfo() {
this.$store.commit("addInfo", this.obj);
},
updatemessage() {
this.$store.dispatch("updateMessage",this.obj).then(res => {
console.log(res)
})
},
addnumbers() {
this.$store.commit("addNumbers")
},
updatenumbers() {
this.$store.dispatch("updateNumbers")
}
},
};
</script>
具体效果可自行演示：
