Vuex的使用(六)——mutations的定义和用法
参考文档:https://vuex.vuejs.org/zh/guide/state是在整个前端应用中需要共享和维护的状态,而在之前的几章里主要介绍了state及其衍生概念的共享和使用,下面重点介绍一下state的维护方式——mutations。官网对mutation的定义:更改Vuex的store中的状态的唯一方法是提交mutation。笔者对mutations的理解是:Vuex需要对state
参考文档:https://vuex.vuejs.org/zh/guide/
state是在整个前端应用中需要共享和维护的状态,而在之前的几章里主要介绍了state及其衍生概念的共享和使用,下面重点介绍一下state的维护方式——mutations。
官网对mutation的定义:更改Vuex的store中的状态的唯一方法是提交mutation。笔者对mutations的理解是:Vuex需要对state进行管理,则必须控制state的维护入口,因此所有对state的变更请求都必须通过mutations来完成。这和Vue通过Object.defineProperty和Proxy来监听data中的数据变化有异曲同工之妙。
接下来介绍一下mutations的基本用法。首先在Vuex中声明mutations(修改文件路径为src\store\index.js),代码如下:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
param1: "state param"
},
getters: {
param2: state => {
return `new ${state.param1}`;
},
// 在getters中可以使用其他getters
param3: (state, getters) => {
return `another ${getters.param2}`;
},
// getter支持返回一个函数
param4: state => index => {
return state.paramArray[index];
}
},
mutations: {
mutation1: state => {
// 在mutations的回调函数内可以修改state的值
state.param1 += " add something";
}
}
});
export default store;
在组件中调用Vuex的mutations来改变state的值(新增文件路径为src\components\componentF.vue),代码如下:
<template>
<div>
<span>mutations用法</span>
<br />
<span>state in vuex:{{param1}}</span>
<br />
<button @click="commitMutation1">mutations</button>
</div>
</template>
<script>
import { mapState} from "vuex";
export default {
name: "component-f",
computed: {
...mapState(["param1"])
},
methods: {
commitMutation1() {
// 通过this.$store.commit("mutations方法名")的方式调用mutations
this.$store.commit("mutation1");
}
}
};
</script>
<style scoped>
</style>
引用上面创建的component-f查看效果(修改文件路径为src\main.js),代码如下:
import Vue from 'vue'
import store from './store'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'
import ComponentD from './components/ComponentD.vue'
import ComponentE from './components/ComponentE.vue'
import ComponentF from './components/ComponentF.vue'
new Vue({
el: '#app',
store,
components: { ComponentA, ComponentB, ComponentC, ComponentD, ComponentE, ComponentF },
template: '<div><component-a></component-a><component-b></component-b><component-c></component-c><component-d></component-d><component-e></component-e><component-f></component-</div>'
});
运行后点击页面上的mutations按钮,可以看到param1被修改为了“state param add something”。
更多推荐
所有评论(0)