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

如何通过Vuetify列表VueJS在Vuex存储中提交突变

1 个答案: