Question

我试图创建一个vue插件，但我收到了错误：

[Vue warn]: Property or method "count" is not defined on the instance but 
referenced during render. Make sure to declare reactive data properties in the 
data option.

我想创建一个我可以导入和使用的单个文件组件，但是一旦我将{{count}}添加到模板中，我就会收到此错误。

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

import Vuex from 'vuex'
import Counter from '/components/counter'


Vue.config.productionTip = false

Vue.use(Counter)
Vue.use(Vuex)

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

let app = new Vue({
  el: '#app',
  router,
  template: '<App/>',
  store:store,
  components: { App, Counter }
})

计数器/ index.js

import Counter from './Counter'

const install = function(Vue, opts){
  Vue.component('counter',Counter)
}

export default { install }

计数器/ counter.vue

<template lang="pug">
  div {{ count }}
</template>

export default {
  data(){
    return {
      count : 0
    }
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

更新：我添加了标记，但我的$ store未定义，我收到错误：

vue.esm.js?0de7:476 [Vue warn]: Error in render function: "TypeError: Cannot read property 'state' of undefine d＆＃34;

如何从此组件访问vuex商店？来自vuex doc：

By providing the store option to the root instance, the store will be 
injected into all child components of the root and will be available on them 
as this.$store.

vue插件警告：未定义属性或方法，但在呈现期间引用

0 个答案: