代码之家 › 专栏 › 技术社区 › thatOneGuy

如何在vuex存储中提交来自vuetify列表的突变,vuejs

vuetify.js vuex vue.js javascript

thatOneGuy · 技术社区 · 8 年前

以下是我之前的问题: 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。

我肯定我遗漏了一些简单的东西,有什么想法吗?

1 回复 | 直到 8 年前

Vamsi Krishna 8 年前

为什么要存储一个函数以在 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)"