如何在 Vuex 商店中提交突变，来自 Vuetify 列表，VueJS

Question

这是我之前的问题：How to get states from a Vuex store from within a Vuetify list, VueJs

我了解如何从商店获取状态，但我在努力从列表中提交突变。

这是我的清单：

export default{
    name: 'menuList',
    data() {
        return {
            show: true,
            items: [{
                    title: 'Do something',
                    icon: 'web',
                    event: function () {
                        this.$store.commit('UI/DoSomething', {
                            argument1: "argument1",
                            rootStore: this.$store
                        })
                    }

                }
            ]
        }
    }
}

我必须将事件放在函数中，否则，提交将立即运行。我只希望它在我单击按钮时运行。

这是我的列表创建：

<template>
  <v-navigation-drawer v-model="show" right clipped app fixed hide-overlay permanent="true">
    <v-list two-line>
      <template v-for="(item, index) in items">
        <v-list-tile :key="item.title" @click="item.event()">
          <v-list-tile-action>
            <v-icon>{{item.icon}}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title v-html="item.title"></v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-divider :key="index"></v-divider>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

当我用函数包装提交时（因此它不会自动执行），关键字“this”指的是对象，而不是 Vue。

我确定我在这里遗漏了一些简单的东西，有什么想法吗？

Answer 1

为什么要在data 选项中存储提交突变的函数？您可以只存储提交突变所需的信息。

export default{
    name: 'menuList',
    data() {
        return {
            show: true,
            items: [{
                    title: 'Do something',
                    icon: 'web',
                    mutation: {
                        type: 'UI/DoSomething',
                         arguments:{ 
                            argument1: "argument1",
                            rootStore: this.$store
                        }
                        }
                    }

                }
            ]
        }
    }
} 

然后创建一个方法如下

commitMutation(mutation) {
     this.$store.commit(mutation.type, mutation.arguments)

}

然后添加一个带有item.mutation 的点击监听器作为commitMutation 方法的参数。

@click="commitMutation(itrm.mutation)"