如何从 Vuetify 列表、VueJS 在 Vuex 商店中提交变更 [英] How to commit mutations in a Vuex store, from a Vuetify list, VueJS

问题描述

这是我上一个问题的延续:如何从VueJs列表中的Vuex存储中获取状态

This follows on from my previous question : How to get states from a Vuex store from within a Vuetify list, VueJs

我了解如何从存储中获取状态，但我正在努力从列表中提交突变.

I understand how to get states from the store, but I am struggling commiting mutations from within a 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
                        })
                    }

                }
            ]
        }
    }
}

我必须将事件放在一个函数中，因为如果我不这样做，提交将立即运行.我只希望它在我点击按钮时运行.

I have to have the event in a function as, if I don't, the commit will run straight away. I only want it to run when I click the button.

这是我创建的列表:

<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.

When I wrap the commit with a function (so it doesn't execute automatically), the keyword 'this' refers to the object, not the Vue.

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

I'm sure I'm missing something simple here, any ideas ?

推荐答案

为什么要在 data 选项中存储一个提交突变的函数?你可以只存储提交所需的信息一个突变.

Why do you want to store a function to commit a mutation in the data option?You can just store the information needed to commit a mutation.

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 方法的点击监听器.

Then add a click listener with item.mutation as an argument to commitMutation method.

@click="commitMutation(itrm.mutation)"

这篇关于如何从 Vuetify 列表、VueJS 在 Vuex 商店中提交变更的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！