스토어 인스턴스를 작성하기 전에 Vue.use(Vuex)를 호출해야 합니다.

스토어 인스턴스를 작성하기 전에 Vue.use(Vuex)를 호출해야 합니다.

왜 이 오류가 발생하는지 알 수 없습니다.모든 게 제대로 된 것 같아요.이렇게 구성 요소로 저장소를 가져옵니다.

import store from './store';


new Vue({
    components: {
     SomeComponent
    },
    store
});

저희 가게는 이렇게 생겼어요.

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

import * as getters from './getters';
import * as actions from './actions';
import mutations from './mutations';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
       something
    }
})

아무쪼록 도와주십시오.고마워요.

검출되지 않은 오류: 스토어 인스턴스를 작성하기 전에 [vuex]가 Vue.use(Vuex)를 호출해야 합니다.

Vue CLI를 사용하여 이렇게 설정하는 것이 좋습니다.

in store/index.interval

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    something: ['something']
  }
})

main.js에서 Vue를 가져옵니다.

import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

비슷한 문제가 발생했는데 모듈이 Vuex를 반환하고 있었습니다.javascript 개체 대신 인스턴스를 저장합니다.파일은 다음과 같습니다.

app.module

import Vue from 'vue'
...
import store from './store'
...

store/index.displaces

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import myModule from './my-module'
...
export default new Vuex.Store({
    modules: { myModule }
    ....
})

my-module/index.js(이것이 문제였습니다)

import Vuex from 'vuex'
...
export default new Vuex.Store({
    namespaced: true,
    state: { ... },
    ...
})

저의 실수는 루트 스토어 1개만 가지고 나머지는 루트 모듈이라는 것이었습니다.따라서 새 저장소를 인스턴스화하지 않고 대신 구성 개체를 반환해야 합니다.다음과 같은 경우:

my-module/index.js(수정판)

...
export default {
    namespaced: true,
    state: { ... },
    ...
}

그래서 만약 누군가 같은 문제를 안고 이곳에 온다면, 시간을 절약할 수 있기를 바랍니다.

샘플 앱에서 이 작업을 수행하는 방법에 대해서는 https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart을 참조하십시오.

app.module

import 'babel-polyfill'
import Vue from 'vue'
import App from './components/App.vue'
import store from './store'
import { currency } from './currency'

Vue.filter('currency', currency)

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

store/index.displaces

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import cart from './modules/cart'
import products from './modules/products'
import createLogger from '../../../src/plugins/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  modules: {
    cart,
    products
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

#katieh 오우..나는 이 문제를 해결했다.웹 팩에 vue-loader 대신 vue가 들어있었어요.그래서 ***가 발생하면 vue-loader를 잘 제거합니다.

이 버그를 해결하기 위해 vue-use-vuex 저장소를 만듭니다.

수정에 사용할 수 있습니다.

npm install vue-use-vuex --save

입력에 한 줄 코드를 추가합니다.

import 'vue-use-vuex'

에러는 표시되지 않습니다.

언급URL : https://stackoverflow.com/questions/44843449/must-call-vue-usevuex-before-creating-a-store-instance