Vuex无法正常工作-导入有问题吗？

Question

尝试在组件中使用Vuex状态。
效果很好：
main.js：

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

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

和内部组件：
<span>{{this.$store.state.test}}</span>

---

当我尝试将Vuex移到单独的store.js时，它不起作用。
store.js（在main.js附近）：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 1
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})

在组件内部进行导入： import store from '../store'，
比尝试使用： <span>{{store.state.test}}</span>
我得到

  

实例上未定义属性或方法“存储”

<span>{{this.$store.state.test}}</span>结果

  

未捕获的ReferenceError：未定义存储

我尝试将export default new Vuex.Store({...})更改为export const store = new Vuex.Store({...})，但没有帮助。

---

P。 S.这对我有用：
内部组件：

computed: {
      counter() {
        return store.state.counter
      }
    }

和<span>{{counter}}</span>。
但是还有其他方法可以不使用computed属性吗？因为我使用Vuex全局调用其状态，所以在这里我必须在任何位置的每个组件中定义computed ...

Answer 1

您的进出口不遵循ES6规则， 如果您使用的是export const store = new Vuex.Store({...}) 您需要这样导入

import {store} from '../store.js'

如果没有，请将您的代码更新为此：

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

Vue.use(Vuex)

export default const store = new Vuex.Store({   state: {
    counter: 1   },   mutations: {
    increment(state) {
      state.counter++
    }   } })

Answer 2

我这样走：
store.js：

export default new Vuex.Store({...})

main.js：

import store from './store'

new Vue({
  ...
  store,
  render: h => h(App)
}).$mount('#app')

比任何组件的模板：<span>{{this.$store.state.counter}}</span>。

无法确认这是最好的方法，但这对我有用。