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: import store from '../store',
, чем пытаетесь использовать: <span>{{store.state.test}}</span>
, и я получаю

Свойство или метод "store" не определены в экземпляре

<span>{{this.$store.state.test}}</span> результаты

Uncaught ReferenceError: хранилище не определено

Я пытался изменить export default new Vuex.Store({...}) на export const store = new Vuex.Store({...}), но это не такпомогло.

---

PS Это у меня работает:
внутри компонента:

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

и <span>{{counter}}</span>.
Но есть ли другой способ без использования computedсвойства?Потому что я использую Vuex для вызова его состояний глобально, и здесь я должен определить computed в каждом компоненте где угодно ...

Answer 1

Я пошел по этому пути:
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>.

Не могу подтвердить, что это лучший способ, но он работает для меня.

Answer 2

ваш экспорт и импорт не следуют правилам 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++
    }   } })