1. vuex: state、getters、mutations、actions
在src目录下面新建一个文件store,在里面新建index.js文件,代码如下:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
// state 用于存储数据
state: {
money: 100,
},
// getters 用于获取state里面的数据,同时也可以进行一些简单的计算属性
getters:{
getMoney: state => {
return state.money
// return state.money + 1 //计算属性
},
},
// mutations 用于修改state里面的数据,修改的方法写在mutations里面(同步操作)
mutations: {
addMoney: state => {
// return state.money = state.money + 1 // 旧的方法
Vue.set(state,'money ', state.money + 1) // 新的方法,不然会getters不到值
},
removeMoney: state => {
// return state.money = state.money - 1 // 旧的方法
Vue.set(state,'money ', state.money - 1) // 新的方法,不然会getters不到值
},
},
// actions 也是用于修改state里面的数据,只不过是从actions > mutations > state的顺序进行修改里面的state的数据(异步操作--推荐)
actions: {
changeAddMoney: (add) => {
add.commit("addMoney")
},
changeRemoveMoney: (remove) => {
remove.commit("removeMoney")
},
},
modules: {},
});
在需要引用vuex里面的数据的文件里面写,代码如下所示:
<template>
<div class="vuex">
<h3>vuex</h3>
<div>
<h4>money</h4>
<div>直接从state里面获取值,不推荐:{{ this.$store.state.money }}</div>
<div>通过getters进行获取值,推荐:{{ this.$store.getters.getMoney }}</div>
<div>
<p>通过mutations直接进行修改state里面的值,不推荐(同步触发state值)</p>
<button @click="addMutations">Add</button>
<button @click="removeMutations">Remove</button>
</div>
<div>
<p>通过actions间接进行修改state里面的值,推荐(异步触发state值)</p>
<button @click="addActions">Add</button>
<button @click="removeActions">Remove</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Vuex",
methods: {
// 此处不要使用箭头函数,因为箭头函数会有this指向问题,会出现$store未定义。
addMutations() {
// 不推荐--同步
this.$store.commit("addMoney");
},
removeMutations() {
// 不推荐--同步
this.$store.commit("removeMoney");
},
addActions() {
// 推荐--异步
this.$store.dispatch("changeAddMoney");
},
removeActions() {
// 推荐--异步
this.$store.dispatch("changeRemoveMoney");
},
},
};
</script>
2. vuex-modules
store / index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const moduleA = {
// 添加命名空间属性namespaced: true
// 默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的,这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性,此时就用到了命名空间这个概念。
// 组件中如何获取带有命名空间moduleA中的state数据?
// this.$store.state.moduleA.age2
namespaced: true,
state: {
age2: 24
},
getters:{
getAge2: state => {
return state.age2
}
},
mutations: {
addAge2: state => {
return state.age2 = state.age2 + 1
},
removeAge2: state => {
return state.age2= state.age2 - 1
},
},
actions: {
changeAddAge2: (add) => {
add.commit("addAge2")
},
changeRemoveAge2: (remove) => {
remove.commit("removeAge2")
},
},
};
export default new Vuex.Store({
state: {},
getters:{},
mutations: {},
actions: {},
modules: {
moduleA: moduleA
},
});
src / views / Vuex.vue
<template>
<div class="vuex">
<h3>vuex</h3>
<div>
<h4>modules</h4>
<div>
在modules中,直接从state里面获取值,不推荐:{{
this.$store.state.moduleA.age2
}}
</div>
<div>
在modules中,通过getters进行获取值,推荐:
{{ this.$store.getters["moduleA/getAge2"] }}
</div>
<div>
<p>
在modules中,通过mutations直接进行修改state里面的值,不推荐(同步触发state值)
</p>
<button @click="addMutationsAgeModule">Add</button>
<button @click="removeMutationsAgeModule">Remove</button>
</div>
<div>
<p>
在modules中,通过actions间接进行修改state里面的值,推荐(异步触发state值)
</p>
<button @click="addActionsAgeModule">Add</button>
<button @click="removeActionsAgeModule">Remove</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Vuex",
components: {},
methods: {
// 此处不要使用箭头函数,因为箭头函数会有this指向问题,会出现$store未定义。
addMutationsAgeModule() {
this.$store.commit("moduleA/addAge2");
},
removeMutationsAgeModule() {
this.$store.commit("moduleA/removeAge2");
},
addActionsAgeModule() {
this.$store.dispatch("moduleA/changeAddAge2");
},
removeActionsAgeModule() {
this.$store.dispatch("moduleA/changeRemoveAge2");
},
},
};
</script>