vuex: count 未在 vue 组件文件中定义

Question

刚开始将 vuex 集成到我的 laravel 应用程序中，正在研究官方 vuex 文档中的示例计数器应用程序。

js/components/calculate.vue

<template>
  <div>
    <p>{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</template>
<script >
  import store from '../app.js'

  export default {
    computed: {
      count () {

        return store.state.count
      }
    },
    methods: {
      increment () {
        store.commit('increment')
      },
      decrement () {
        store.commit('decrement')
      }
    }
  }
</script>

js/app.js

const calculate = Vue.component('calculate', require('./components/calculate.vue'));

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
});



const app = new Vue({
  el: '#app'
});

使用 webpack 构建

我在这行 store.state.count 未定义错误 return store.count。

Answer 1

如果您在 app.js 文件中创建商店，（因为您没有提到）您需要添加

const calculate = Vue.component('calculate', require('./components/calculate.vue'));

Vue.use(Vuex) // this line

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
});

const app = new Vue({
  el: '#app'
});

这不言而喻，您需要在此文件中导入Vuex。

之后您需要修改这部分代码：

const app = new Vue({
  el: '#app'
});

到

const app = new Vue({
  el: '#app',
  store // if you're vue-cli/babel else use store: store
});

并且在js/components/calculate.vue

<template>
  <div>
    <p>{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</template>
<script >
 // import store from '../app.js' this import is not required

  export default {
    computed: {
      count () {
        return this.$store.state.count
      }
    },
    methods: {
      increment () {
        this.$store.commit('increment')
      },
      decrement () {
        this.$store.commit('decrement')
      }
    }
  }
</script>

不需要导入，因为 vue 实例的每个组件都应该可以访问 store，要访问它，您只需要访问 $store vue 实例的属性在您的组件中是 this （只要上下文不通过回调或类似的方式改变。）

vuex: count 未在 vue 组件文件中定义

vuex: count is not defined in vue component file

javascript

laravel-5.3

vuejs2

vuex