Directorio de artículos
Introducción
despacho: contiene operaciones asincrónicas, como enviar datos al fondo, escribiendo: this.$store.dispatch('nombre del método de acción', valor)
commit: operación síncrona, escribiendo: this.$store.commit('nombre del método de mutaciones', valor)
1. Enviar mutación en el componente Vue
Código: 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;
código 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. Mutación de envío de estilo de objeto
Otra forma de enviar una mutación es usar el objeto que contiene el atributo de tipo directamente.
Cuando se usa el método de envío de estilo de objeto, el objeto completo se pasa como carga útil a la función de mutación.
Daisui 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. Operador de propagación + función auxiliar mapMutations (…mapMutations)
Daisui 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. La acción cambia de estado de forma asíncrona
Daisui 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');
}
}
});
Usar acciones en componentes es similar a usar mutaciones en componentes, la
diferencia es que las mutaciones usan this.$store.commit('nombre del método de mutación') para enviar mutaciones;
las acciones usan this.$store.dispatch('nombre del método de acción') para enviar acciones
Daisui 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. Operador de propagación + función auxiliar de mapActions (… mapActions)
Daisui 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>