Computed 属性 "dialog" 已分配给但它没有 setter

Question

我正在重现这段代码 (Codepen):

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">

      <v-dialog
        v-model="dialog"
        width="500"
      >
        <v-btn
          slot="activator"
          color="red lighten-2"
          dark
        >
          Click Me
        </v-btn>

        <v-card>
          <v-card-title
            class="headline grey lighten-2"
            primary-title
          >
            Privacy Policy
          </v-card-title>

          <v-card-text>
            Hello there Fisplay
          </v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="primary"
              flat
              @click="dialog = false"
            >
              I accept
            </v-btn>
          </v-card-actions>
        </v-card>

      </v-dialog>
    </div>
  </v-app>
</div>

我的真实代码和这个代码之间的唯一区别是，我在 store/index.js 中定义了对话框（this 在 Nuxt.js 中），我在其中声明对话框是状态的一个元素：

return new Vuex.Store({                                                                                                                                              
        state: {                                                                                                                          
            dialog: false,

然后，在我当前的组件中，我导入了 $store.state.dialog 标志：

<script>                                                                                                                                                                 
import { mapState } from 'vuex';                                                                                                                            

export default {                                                                                                                                                         
    computed: {                                                                                                                                                          
        ...mapState([                                                                                                                                                    
            'dialog'                                                                                                                                                     
        ]),      
}
</script>

每当我点击按钮时，我都会收到此错误消息：

[Vue warn]: Computed property "dialog" was assigned to but it has no setter.

如何解决这个问题？还有其他选择吗？

Answer 1

您需要使用 Vuex 突变来更新状态。

https://vuex.vuejs.org/guide/mutations.html

在你的例子中，

您的点击事件应该在方法 @click="handleClick"

中处理

methods: {
  handleClick() {
    this.$store.commit('openDialog')
}

在你的store.js

mutations: {
  openDialog(state) {
    state.dialog = true
  }
}

Answer 2

mapState 只会创建 getter。你应该在你的 vuex store 中定义一个 mutation，它将能够改变状态。

只需将此添加到您的商店：

...
mutations: {
 SET_DIALOG_FLAG_FALSE (state) {
   state.dialog = false;
},
//optional if you do not want to call the mutation directly
//must important different is, that a mutation have to be synchronous while
//a action can be asynchronous
actions: {
 setDialogFalse (context) {
  context.commit('SET_DIALOG_FLAG_FALSE');
 }
}

如果您想在组件中使用 mapMutations/mapAction：

import { mapMutation, mapActions } from vuex;
...
//they are methods and not computed properties
methods: {
 ...mapMutations([
  'SET_DIALOG_FLAG_FALSE'
 ]),
 ...mapActions([
  'setDialogFalse'
 ])
}

现在，在您的 v-btn 中，您可以调用动作或突变。

<v-btn
  color="primary"
  flat
  @click="this.setDialogFalse"> I accept </v-btn>

Computed 属性 "dialog" 已分配给但它没有 setter

Computed property "dialog" was assigned to but it has no setter

vue.js

nuxt.js

vuetify.js