vuex 属性 actions 进阶问题

》》点此进入声明调用基础文章《《

调用

<div><input type="button" @click="$store.dispatch('listMore')" value="加载更多"></div>

声明：

new vuex.Store({
    actions:{
         listMore(context){   //它其实会默认传递一个参数，这里面有关于所有 vuex 的操作方法
         	console.log(context)
         }
    }
})

我们可以通过它去调用 mutations 方法去修改 state 的值

new vuex.Store({
    actions:{
         listMore(context){   //它其实会默认传递一个参数，这里面有关于所有 vuex 的操作方法
         	context.commit("ZHANG_SAN");
         }
    }
})

同样也可以通过 state 来获取 state 中的值

new vuex.Store({
    actions:{
         listMore(context){   //它其实会默认传递一个参数，这里面有关于所有 vuex 的操作方法
         	console.log(context.state.zhangsan);
         }
    }
})

既然这样，我们就可以通过解构赋值，将代码简化，只用我们用的到的

new vuex.Store({
    actions:{
         listMore({commit,state,dispatch}){   //顺序不分先后，都可以使用
         	commit("ZHANG_SAN");              //这样我们就省去了 context 
         	console.log(state.zhangsan);
         }
    }
})