前言
在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。
是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下
rush:js;">
//vuex中的state
const state = {
count: 0
}
export default state;
mutation传参
朴实无华的方式
mutation.js
{
//n是从组件中传来的参数
state.count += n;
}
}
export default mutations;
vue组件中（省去其他代码）
rush:js;">
methods: {
add(){
//传参
this.$store.commit('increment',5);
}
}
对象风格提交参数
mutation.js
{
state.count -= payload.amount;
}
}
export default mutations;
vue组件
rush:js;">
methods: {
reducea(){
//对象风格传参
this.$store.commit({
type: 'decrementa',amount: 5
});
},}
action传参
朴实无华
action.js
rush:js;">
/vuex中的action
const actions = {
increment(context,args){
context.commit('increment',args);
}
}
export default actions;
mutation.js
{
state.count += n;
}
}
export default mutations;
vue组件
rush:js;">
methods: {
adda(){
//触发action
this.$store.
dispatch('increment',5);
}
}
对象风格
action.js
rush:js;">
//vuex中的action
const actions = {
decrementa(context,payload){
context.commit('decrementa',payload);
}
}
export default actions;
mutation.js
{
state.count -= payload.amount;
}
}
export default mutations;
vue组件
rush:js;">
methods: {
reduceb(){
this.$store.
dispatch({
type: 'decrementa',amount: 5
});
}
}
action的异步操作
突然就想总结一下action的异步操作。。。。
返回promise
action.js
{
setTimeout(() => {
context.commit('multiplication',payload);
resolve("async over");
},2000);
});
}
}
export default actions;
mutation.js
rush:js;">
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue组件
{
console.log(result);
});
}
}
在另外一个 action 中组合action
action.js
{
commit('multiplication',payload);
return "async over";
})
}
}
export default actions;
mutation.js
rush:js;">
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue组件
{
console.log(result);
});
}
}
使用async函数
action.js
rush:js;">
//vuex中的action
const actions = {
asyncMul(context,async actionb({
dispatch,payload){
await
dispatch('asyncMul',payload);
commit('multiplication',payload);
}
}
export default actions;
mutation.js
rush:js;">
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue组件
{
...
});
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
