Неперехваченная ошибка типа: Vue не является конструктором - Vuex с Vue 3

#vuex #vuejs3

Вопрос:

Я пытаюсь использовать Vuex с Vue 3. Вот мой код в main.js:

 import { createApp } from 'vue';
import App from './App.vue';
import Vuex from 'vuex';

const app = createApp(App);
app.use(Vuex);

const store = new Vuex.Store({
    state: {
        counter: 0
    }
});

app.store(store);
app.mount('#app');

При попытке этого я получаю следующую ошибку:

 Uncaught TypeError: Vue is not a constructor

Я пытался использовать синтаксис, рекомендованный в официальных документах Vuex, но это тоже не работает. Кто-нибудь знает, как это исправить?

1. Каковы ваши точные версии Vue и Vuex?

2. Глядя на мой package.json, это vue ^ 3.0.0-0 и vuex ^ 3.5.1

3. package.json Это ненадежный способ проверить точную установленную версию. Тем не менее, похоже, что у вас есть Vuex 3, когда вам нужен Vuex 4. Смотрите github.com/vuejs/vue-next#vuex

4. в частности, vue 3.0.0-rc.7

5. Это устранило мою проблему, спасибо

Ответ №1:

Эта ошибка возникает из-за того, что вы вызываете, new Vuex.Store как это делается для Vuex 3.

Если вы используете Vue 3, вы должны установить Vuex 4, выполнив:

 # npm
npm install --save vuex@next

# yarn
yarn add vuex@next

Затем создайте свое хранилище и «внедрите» его в экземпляр Vue следующим образом:

 import { createStore } from 'vuex';
import { createApp } from 'vue';

const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

const app = createApp({ /* your root component */ });

app.use(store);

Обратитесь к документам Vuex для получения более подробной информации:

Vuex 4 для Vue 3