web-dev-qa-db-ja.com

ストアインスタンスを作成する前に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）を呼び出す必要があります。

javascriptvuejs2vuex
9
katieh

Vue CLIを使用して、このように設定するとうまくいきます

store /index.jsで

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

Vue.use(Vuex)

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

main.jsでimport Vue from'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 }
})
18
user3765825

同様の問題が発生しましたが、モジュールがjavascriptオブジェクトではなくVuex.Storeインスタンスを返していたことがわかりました。私のファイルは次のようなものでした：

app.js

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

store/index.js

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: { ... },
    ...
}

ですから、同じ問題で誰かがここに到着した場合、それがあなたの時間を節約できることを願っています。

6
fernandosavio

サンプルアプリでの方法については、 https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart を参照してください。

app.js

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

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()] : []
})
0
Adam Zerner