Vue.js undefined 的使用方法答案

【问题标题】：Vue.js use method of undefinedVue.js undefined 的使用方法
【发布时间】：2021-05-19 10:19:48
【问题描述】：

目前我正在使用 Vue CLI 版本 ^3.0.0 和 Vuex ^3.6.0，但是当我想使用 Vue.use(Vuex) 时。它说在浏览器中无法读取未定义的使用。

代码：

main.js

import App from './App.vue'
import store from './store'

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

Store.js：

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

Vue.use(Vuex);

export default Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})

收到错误：

未捕获的类型错误：无法读取未定义的属性“使用”

你们有什么想法吗？

提前致谢。

【问题讨论】：

如果你使用 vue-cli 设置 vue，你可以运行：vue add vuex 它会完成所有工作

标签： javascript vue.js vuex

【解决方案1】：

如果您使用的是 Vue 3，它不支持全局配置。我认为你需要这样做：

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

const store = createStore(
  // options
);

const app = createApp(
  // options
);

app.use(store);

您还需要升级到 vuex@4 以获得 Vue 3 支持。

【讨论】：

我一直在寻找 Vuex 版本 4，但没有看到任何版本的 npm install，你能发个链接吗？
试试npm install vuex@next
npm install vuex@4.0.0-rc.2?
我已经安装了你的版本，但现在它没有显示任何结果，但它没有给出任何错误

【解决方案2】：

Store.js:

import { createStore } from 'vuex'

export default createStore({

state: {...},
mutations: {...},
action: {...},
getters: {...}

})

main.js


import App from './App.vue'
import { createApp } from 'vue'
import store from './store'

createApp(App)    
    .use(store)    
    .mount('#app')

【讨论】：

我该如何使用这些状态？我可以像 ReactJS 一样使用 this.state.name

【解决方案3】：

移动

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

到 main.js 因为你需要在它初始化之前调用

【讨论】：