计算属性“对话框”已分配给但它没有设置器[重复]答案

【问题标题】：Computed property "dialog" was assigned to but it has no setter [duplicate]计算属性“对话框”已分配给但它没有设置器[重复]
【发布时间】：2019-02-16 16:29:24
【问题描述】：

我正在复制此代码 (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（Nuxt.js 中的这个）中定义了对话框，其中我将对话框声明为状态元素：

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

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

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

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

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

[Vue 警告]：计算属性“对话框”已分配给但它没有二传手。

如何解决这个问题？有什么选择吗？

【问题讨论】：

请检查这里提到的相同问题stackoverflow.com/questions/46106037/…
感谢该链接@Traxo，我解决了问题，非常感谢

标签： vue.js vuetify.js nuxt.js

【解决方案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
  }
}

【讨论】：

【解决方案2】：

mapState 只会创建 getter。您应该在您的 vuex 存储中定义一个突变，它将能够更改状态。

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

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

【讨论】：