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

Question

这是我之前的问题的后续：

我了解如何从存储中获取状态，但我很难从列表中进行更改。

这是我的清单：

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

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

How to commit mutations in a Vuex store, from a Vuetify list, VueJS

javascript

vue.js

vuex

vuetify.js