一、什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
二、Vuex的结构说明
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//单一数据数，一个对象包含了全部的应用层级状态。
export default new Vuex.Store({
//全局状态的数据源，相当于data。
state: {
num:0
},
//在 store 中的 state 中派生出状态，相当于store的计算属性。
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
三、State属性的用法
1.声明数据
在state中声明了num变量
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//单一数据数，一个对象包含了全部的应用层级状态。
export default new Vuex.Store({
//全局状态的数据源，相当于data。
state: {
num:0
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
2.读取数据
直接读取：因为我们将store已经挂载到Vue实例上去了，所以我们可以直接获取到store的数据。
//在html中获取
<h1>{
{ $store.state.num }}</h1>
//在script里面获取
console.log(this.$store.state.num);通过computed获取（本质一样）
<h1>{
{ count }}</h1>
computed:{
count(){
return this.$store.state.num
}
},3.通过mapState辅助函数优化store取值
通过上述方法取值太过于繁琐，建议通过mapState辅助函数优化取值。
下面提供四种写法，建议使用写法4。
<template>
<div>
<h1>{
{ num }}</h1>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed:{
//通过展开运算符将mapState混入到外部对象中
// ...mapState({
// 写法1：
// 箭头函数简化取值代码
// 简化前：
// count(state){
// return state.num
// }
// 简化后：
// count:state=>state.num
// 写法2:
// 直接传递字符串，相当于state=>state.num
// count:'num'
//写法3：
// 当需要与局部变量混合使用时，必须使用常规函数
// count(state){
// return state.num+this.name
// }
// })
//写法4：
// 当计算属性与state数据名称相同时可以简写，需要写成数组格式
...mapState(['num'])
},
data(){
return {
name:'小陈'
}
},
created(){
console.log(this.$store.state.num);
}
}
</script>
<style>
</style>四、Getter属性的用法
1.声明数据
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//单一数据数，一个对象包含了全部的应用层级状态。
export default new Vuex.Store({
//全局状态的数据源，相当于data。
state: {
num: 0,
list: [
{
name: '张三',
id: 1,
type: 1
},
{
name: '李四',
id: 2,
type: 2
},
]
},
// 在 store 中的 state 中派生出状态，相当于store的计算属性。
getters: {
//接收两个参数，第一个参数接收state，也可以接收其他的getters作为参数。
doneNum(state) {
return state.num + 10
},
doneList(state, getters) {
return state.list.find(item => item.type === 1).name + getters.doneNum
},
//也可以返回一个函数用于数据的查询等操作
getData: (state) => (id) => {
return state.list.find(item => item.id === id)
}
},
mutations: {
},
actions: {
},
modules: {
}
})
2.读取数据
直接读取：因为我们将store已经挂载到Vue实例上去了，所以我们可以直接获取到store的数据。
<h1>{
{ $store.getters.doneList }}</h1>取值类比于state取值，通过计算属性进行获取，不再进行额外说明 。
如果getters返回的是一个方法，则可以直接传参调用。
<h1>{
{ $store.getters.getData(2) }}</h1>3.通过mapGetters辅助函数优化getters取值
为了简化getters的取值，所以引入了mapGetters辅助函数。
如果getters返回的是一个方法，同样可以接收并调用。
<template>
<div>
<h1>{
{ doneName }}</h1>
</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
computed: {
...mapState(["num"]),
//使用展开运算符将 getter 混入 computed 对象中
// ...mapGetters([
// // 写法一：
// "doneNum",
// ]),
// 当你想要给getter属性领取一个名字时，使用对象形式
...mapGetters({
doneName:'doneList'
})
},
data() {
return {
name: "小陈",
};
},
created() {
console.log(this.$store.state.num);
},
};
</script>
<style>
</style>五、Mutation属性的用法
1.声明方法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//单一数据数，一个对象包含了全部的应用层级状态。
export default new Vuex.Store({
//全局状态的数据源，相当于data。
state: {
num: 0,
list: [
{
name: '张三',
id: 1,
type: 1
},
{
name: '李四',
id: 2,
type: 2
},
]
},
// 在 store 中的 state 中派生出状态，相当于store的计算属性。
getters: {
//接收两个参数，第一个参数接收state，也可以接收其他的getters作为参数。
doneNum(state) {
return state.num + 10
},
doneList(state, getters) {
return state.list.find(item => item.type === 1).name + getters.doneNum
},
//也可以返回一个函数用于数据的查询等操作
getData: (state) => (id) => {
return state.list.find(item => item.id === id)
}
},
//更改Vuex的store中状态的唯一方法就是提交mutations。
// 可接收多个参数，第一个参数为state。
//可以理解为在mutations我们可以声明多个用于更改state的方法并在需要的时候，通过commit方法去触发对应的方法从而更改store里面的状态。
mutations: {
changNum(state,data){
state.num+=data.price
}
},
actions: {
},
modules: {
}
})
2.触发方法，更改store状态
<template>
<div>
<h1>{
{ num }}</h1>
<button @click="changNum">点我触发mutation更改store的状态</button>
</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
computed: {
...mapState(["num"]),
...mapGetters({
doneName:'doneList'
})
},
data() {
return {
name: "小陈",
};
},
methods:{
//写法一：
// changNum(){
// this.$store.commit('changNum',{price:2})
// }
// 写法二：通过type属性指定提交
//需要注意的是这样触发mutation方法时，整个对象会作为第二个参数传递到mutation的方法中
changNum(){
this.$store.commit({
type:'changNum',
price:2
})
}
},
created() {
console.log(this.$store.state.num);
},
};
</script>
<style>
</style>3.Mutation 必须是同步函数
任何在回调函数中进行的状态的改变都是不可追踪的。
4.通过mapMutations辅助函数优化Mutation内方法的触发
<template>
<div>
<h1>{
{ num }}</h1>
<button @click="add({price:2})">点我触发mutation更改store的状态</button>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
computed: {
...mapState(["num"]),
...mapGetters({
doneName: "doneList",
}),
},
data() {
return {
name: "小陈",
};
},
methods: {
//写法一：
// changNum(){
// this.$store.commit('changNum',{price:2})
// }
// 写法二：通过type属性指定提交
//需要注意的是这样触发mutation方法时，整个对象会作为第二个参数传递到mutation的方法中
// changNum(){
// this.$store.commit({
// type:'changNum',
// price:2
// })
// }
//通过展开运算符将mapMutations混入到外部对象中
//传递参数的话，可以在触发时直接传递
// ...mapMutations(['changNum']),
//当需要重新命名时
...mapMutations({
add:'changNum'
}),
},
created() {
console.log(this.$store.state.num);
},
};
</script>
<style>
</style>