Javascript vuex:未在vue组件文件中定义计数

刚刚开始将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>

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

使用网页包构建

---

如果您要在app.js文件中创建应用商店（因为您没有提到），我在这一行中遇到了

store.state.count

未定义错误

return store.count

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'
});

到

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

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


{{count}}


+
-

//从“../app.js”导入存储不需要此导入
导出默认值{
计算：{
计数（）{
返回此项。$store.state.count
}
},
方法：{
增量（）{
此.$store.commit（'increment'）
},
减量{
此.$store.commit（'decrement'））
}
}
}

由于
vue
实例的每个组件都应该可以访问
store
，因此不需要导入，要访问它，您只需要访问
vue
实例的
$store
属性，该属性在您的组件中是
this
（只要上下文没有通过回调或类似方式更改。）
当我添加Vue.use（Vuex）；get
Uncaught TypeError:plugin.apply不是函数时，请不要添加
Vue.use（Vuex）
part.现在错误消失了，但显示了另一个错误
Uncaught TypeError:无法读取
return store.state.count
@AmreshVenugopal中未定义的属性'count'？？