文章目录
简介
dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)
commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)
1. 在Vue组件中提交 mutation
代码: index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// Vuex 的状态存储是响应式的
// 创建一个Vuex.Store的实例
const store = new Vuex.Store({
// 存储状态
state: {
count: 0
},
// mutation中最多有两个参数，第一个参数为state，要传多个参数，可传递一个对象
mutations: {
// 类型为 increment 的 mutation
increment (state) {
// 变更状态
state.count++;
},
// 类型为 reduce 的 mutation
reduce (state, n) {
// 变更状态
state.count -= n;
},
// 类型为 change 的 mutation,第二个参数为一个对象
change (state, payload) {
// 变更状态
state.count = state.count + payload.a + payload.b;
}
}
});
export default store;
代码testState.vue
<template>
<div class="hello">
<button @click="add">加1</button>
<button @click="reduce">减2</button>
<button @click="change">change</button>
<h1>{
{
count }}</h1>
</div>
</template>
<script>
import {
mapState } from 'vuex';
export default {
data () {
return {
};
},
computed: {
...mapState(['count'])
},
methods: {
add () {
// 以相应的 type 调用 store.commit 方法
this.$store.commit('increment');
console.log(this.$store.state.count);
},
reduce () {
// 可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
this.$store.commit('reduce', 2);
},
change () {
// 注意：只可以向 store.commit 传入额外的一个参数
// 如果要传多个参数，就传一个对象作为参数，即大多数情况下，载荷应是一个对象
this.$store.commit('change', {
a: 4, b: 6});
}
}
};
</script>
2. 对象风格提交mutation
提交 mutation 的另一种方式是直接使用包含 type 属性的对象
当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数
代码testvue.vue
<template>
<div class="hello">
<button @click="add">加1</button>
<button @click="reduce">减2</button>
<button @click="change">change</button>
<h1>{
{
count }}</h1>
</div>
</template>
<script>
import {
mapState } from 'vuex';
export default {
data () {
return {
};
},
computed: {
...mapState(['count'])
},
methods: {
add () {
// 以相应的 type 调用 store.commit 方法
this.$store.commit({
type: 'increment'
});
},
reduce () {
// 这种没法改用对象风格提交mutation
// 因为第二个参数必须是对象才能使用对象风格提交mutation
this.$store.commit('reduce', 2);
},
change () {
this.$store.commit({
type: 'change',
a: 4,
b: 6
});
}
}
};
</script>
3. 展开运算符+mapMutations辅助函数（…mapMutations）
代码testvue.vue
<template>
<div class="hello">
<button @click="increment">加1</button>
<button @click="reduce(2)">减2</button>
<button @click="change({a:4, b:6})">change</button>
<h1>{
{
count }}</h1>
</div>
</template>
<script>
// 导入mapState和mapMutations函数
import {
mapState, mapMutations } from 'vuex';
export default {
data () {
return {
};
},
computed: {
...mapState(['count'])
},
methods: {
// 展开运算符+mapMutations辅助函数
...mapMutations(['increment', 'reduce', 'change'])
}
};
</script>
4. Action 异步变更状态
代码testvue.vue
// 创建一个Vuex.Store的实例
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++;
}
},
// 异步变更状态，Action 提交的也是 mutation
// Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
// Action调用 context.commit 提交一个 mutation
// Action通过 context.state 和 context.getters 获取 state 和 getters。
actions: {
increment (context) {
context.commit('increment');
}
}
});
在组件中使用actions，在组件中使用actions和在组建中使用mutations类似
区别就是，mutations使用this.$store.commit(‘mutation方法名’)提交mutation；
actions使用this.$store.dispatch(‘action方法名’)分发action
代码testvue.vue
<template>
<div>
<button @click="increment">加1</button>
<h1>{
{
count }}</h1>
</div>
</template>
<script>
import {
mapState } from 'vuex';
export default {
data () {
return {
};
},
computed: {
...mapState(['count'])
},
methods: {
increment () {
return this.$store.dispatch('increment');
}
}
};
</script>
5. 展开运算符+mapActions 辅助函数（…mapActions ）
代码testvue.vue
<template>
<div>
<button @click="increment">加1</button>
<h1>{
{ count }}</h1>
</div>
</template>
<script>
// 导入mapActions函数
import { mapState, mapActions } from 'vuex';
export default {
data () {
return {};
},
computed: {
...mapState(['count'])
},
methods: {
// 展开运算符+mapActions辅助函数
...mapActions(['increment'])
}
};
</script>