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中定义了对话框（在Nuxt.js中），在该对话框中，我将dialog声明为状态元素：

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

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

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

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

每当我单击按钮时，都会出现以下错误消息：

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

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

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

已分配计算属性“对话框”，但没有设置器

1 个答案: