Vue.js简化vuex操作调用

Question

我正在通过类似这样的组件调用存储操作：

sublitPost(){
    this.$store.dispatch({type:"submitPost", userPost:this.newPost});
}

存储操作如下：

  actions: {
    submitPost({commit, state}, userPost: any) {
     /...rest code here

尽管，我想简化一下，并称其为：

sublitPost(){
    this.$store.dispatch("submitPost", this.newPost);
}

我必须对动作签名进行哪些调整？我尝试过的动作是：

  actions: {
        submitPost(userPost: any) {
          console.log({userPost})
         /...rest code here

，但是在这种情况下，接收到的对象看起来不正确。我在控制台日志中得到的是：

欢迎任何帮助

Answer 1

您应该更改语法：

Patindex

Answer 2

我将商店划分为模块，因此我正在导出所有的变异，动作和获取方法。 我正在使用有效负载对操作进行更改，其中有效负载是一个具有currentWidth属性的对象

export function updateDeviceCurrentWidth (state, payload) {
  state.currentDeviceWidth = payload.currentWidth
}

我的突变

export const currentDeviceWidth = state => state.currentDeviceWidth

我的吸气剂

myEventHandler () {
      this.$store.dispatch('fetchDeviceCurrentWidth', {
        currentWidth: window.innerWidth
      })
    }

这是我派遣行动的地方：

htmltab

有很多使用vuex存储的方法，但是我喜欢根据功能或组件将存储分为模块。