vue.js - 属性或方法“msg”未在实例上定义，但在渲染期间引用

Question

在尝试 Vue 和 Vuex 时，我偶然发现了以下错误消息：

[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我没能理解和解决这个问题，主要是因为msg定义在data. 它可能与 Vuex 没有直接关系，但我只有在开始使用 Vuex 时才遇到它。

这是我的代码：

主.js：

import Vue from 'vue'
import App from './App.vue'
import { store } from './store.js'

Vue.component('app',  App);

var vApp = new Vue({
  el: '#app',
  store,
  render: h => h(App),
})

应用程序.vue：

<template>
  <div id="app">
    <div v-text="msg"></div>
    <input id="name-b" class="input" v-model="nameB" type="text" placeholder="Name B">
  </div>
</template>

<script type = "text/javascript">
  module.exports = {
    name: 'app',
    data() {
      return {
        msg: 'boooo'
      }
    },
computed: {
  return {
    nameB: {
      get() {
          this.$store.state.nameB
        },
        set(value) {
          this.$store.commit('setName', value);
        }
    },
  } 
</script>

<style>
</style>

商店.js：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    nameB: '',
  },
  mutations: {
    setName: function(state, name) { state.locationName = name},
  },
});

谢谢。

Answer 1

问题解决了。这是一个大括号问题，可能不需要returnin ......computed

这是一个令人困惑的错误消息。