javascript - 如何从 Vuetify 列表、VueJS 在 Vuex 存储中提交突变

Question

这是我上一个问题的延续:How to get states from a Vuex store from within a Vuetify list, VueJs

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

这是我的 list :

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)"