一、vuex的中的主要核心概念如下:
- State
- Mutation
- Action
- Getter
二、State
State提供唯一的公共数据源,所有共享的数据要统一放到 Store 的 state 中进行存储
// 创建 store 数据源,提供唯一公共数据
const store=new Vuex.Store({
state: {
count: 0
},
})
2.1 组件访问 state 中数据的第一种方式:this.$store.state.全局数据名称
// 例如:
this.$store.state.count
2.2 组件访问 state 中数据的第二种方式:...mapState()
// 1、从 vuex 中按需导入 mapState 函数
import { mapState } from "vuex";
通过导入的 mapState 函数,将当前组件需要的全局数据,映射为当前组件的 computed 计算属性:
// 2、将全局数据,映射为当前组件的计算属性:
computed:{
...mapState(['全局数据名称'])
}
// 例如:
computed:{
...mapState(['count'])
}
// 表示 isMobile 在 "admin/layout" 文件夹下
...mapState("admin/layout", ["isMobile"]),
三、Mutation
Mutation用来变更 Store中的数据
- 在 vuex 中,只能通过 mutation 来变更 store 中的数据,不可以直接来操作 store中的数据
- Mutation 可以集中监控所有数据的变化
- 在 mutation 中不能执行异步操作
3.1 触发 mutation 函数的第一种方式:this.$store.commit()
在 store 文件中:
// 1、定义 Mutation
const store=new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
// 变更状态
state.count++
}
},
})
在组件页面中:
// 触发 mutation
methods: {
btnHander1() {
// 触发 mutation 的一种方式
// commit 的作用就是调用某个 mutation 函数
this.$store.commit("add");
},
},
<template>
<div>
<h2>当前count的最新值为:{{ $store.state.count }}</h2>
<button @click="btnHander1">+1</button>
</div>
</template>
3.2 在触发 mutation 时传递参数:
// 1、定义 Mutation
const store=new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state, step) {
state.count += step
}
},
})
// 触发 mutation
methods: {
btnHander1() {
// 触发 mutation 的一种方式
this.$store.commit("add", 2);
},
},
3.3 触发 mutation 函数的第二种方式:...mapMutations()
// 1、从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from "vuex";
// 2、将指定的 mutations 函数,映射为当前组件的 methods 函数
methods: {
...mapMutations(["reduce"]),
btnHander2() {
this.reduce();
},
},
// 直接调用该函数
<template>
<div>
<h2>当前count的最新值为:{{ count }}</h2>
<button @click="btnHander2">-1</button>
</div>
</template>
四、Action
用于处理异步任务
如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。
在 store 文件中
// 定义 Action
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
// 变更状态
state.count++
},
},
actions: {
addAsync(context) {
setTimeout(() => {
// 在 action 中,不能直接修改 state 中的数据
// 必须通过 context.commit() 来触发某个 mutation 才行
context.commit('add')
}, 1000);
}
},
})
在页面中
4.1 触发 Action 的第一种方式:this.$store.dispatch()
<template>
<div>
<h2>当前count的最新值为:{{ $store.state.count }}</h2>
<button @click="btnHander2">+1</button>
</div>
</template>
<script>
export default {
name: "addition",
data() {
return {};
},
methods: {
btnHander2() {
// 触发 Action 的第一种方式
this.$store.dispatch("addAsync");
},
},
};
</script>
4.2 触发 Action 时传递参数
// 定义 Action
actions: {
addAsyncN(context, step) {
setTimeout(() => {
// 在 action 中,不能直接修改 state 中的数据
// 必须通过 context.commit() 来触发某个 mutation 才行
context.commit('addN', step)
}, 1000);
}
},
// 触发 action
methods: {
btnHander2() {
// 触发 Action 的第一种方式
this.$store.dispatch("addAsyncN", 3);
},
},
4.3 触发 Action 的第二种方式:...mapActions()
// 1、从 vuex 中按需导入 mapActions 函数
import { mapActions } from "vuex";
// 通过导入的 mapActions 函数,将需要的 actions 函数,映射为当前组件的 methods 方法
methods: {
...mapActions(["reduceAsync"]),
btnHander3() {
this.reduceAsync();
},
},
五、Getter
用于对 store 中的数据进行加工处理成新的数据 (不会修改 store 中的原数据,只起到包装数据的作用)
- 可以对 store 中的数据进行加工处理成新的数据,类似于 vue 中的计算属性 computed
- store 中的数据发生变化,Getter 的数据也会发生变化
// 1、定义 Getters
const store=new Vuex.Store({
state: {
count: 0
},
getters: {
showNum(state) {
return '当前最新的数量是:' + state.count
}
},
})
5.1 使用 Getters 的第一种方式:this.$store.getters.名称
// 例如:
this.$store.getters.showNum
5.1 使用 Getters 的第二种方式:...mapGetters ()
// 1、从 vuex 中按需导入 mapGetters 函数
import { mapGetters } from "vuex";
<template>
<div>
<h2>{{ showNum }}</h2>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {};
},
computed: {
...mapGetters(["showNum"]),
},
};
</script>