Vue3想实例Vuex.Store()却发现不可以使用Vue.use(Vuex)

问题引入

某天你想使用Vuex.Store(),然后就可能遇上如下麻烦
当你用Vue.use(Vuex)就会报如下错误:

Uncaught TypeError: Cannot read property ‘use’ of undefined

当你不要Vue.use(Vuex)又会报如下错误:

Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.

习惯了vue2的Vue.use(),在vue3当中就会感到有点蛋疼,因为它更喜欢像createApp()这种导出被暴露的方法去实例化引用。

解决方案:

  • 我们可以通过卸载VueX(3.6)来使它正常工作
npm uninstall vuex
  • 并安装VueX(4.0 alpha)
npm i vuex@4.0.0-alpha.1
  • main.js
import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')
  • store.js
import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      patients: []
    }
  }
})

export default store;

另外

我们正在将vuex 3语法与Vue 3一起使用,而vue 3和具有以上语法的vuex 4互相兼容。

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex.Store中可以设置项目共享变量。Vuex.StoreVue.js官方推荐的状态管理工具,可以用来管理全局状态。你可以在Vuex.Store中定义一个state,将变量存储到state中,然后在组件中通过this.$store.state来访问这个共享变量。具体的实现步骤如下: 1. 创建一个Vuex.Store实例,并定义一个state。例如,你可以在`store.js`中创建一个名为`shared`的state,代码如下: ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { shared: { count: 0 } }, mutations: { increment(state) { state.shared.count++ } } }) export default store ``` 在这个例子中,我们在state中定义了一个名为`shared`的对象,其中包含一个名为`count`的变量,初始值为0。我们还定义了一个名为`increment`的mutation,用于将`count`变量加1。 2. 在组件中使用共享变量。你可以在任何Vue组件中使用`this.$store.state.shared.count`来访问这个共享变量。例如,在一个组件中,你可以这样使用这个共享变量: ```javascript <template> <div> <p>Count: {{ count }}</p> <button @click="incrementCount">Increment</button> </div> </template> <script> export default { computed: { count() { return this.$store.state.shared.count } }, methods: { incrementCount() { this.$store.commit('increment') } } } </script> ``` 在这个例子中,我们使用了`computed`属性来计算`count`变量,使用`this.$store.state.shared.count`来获取共享变量的值。我们还定义了一个`incrementCount`方法,用于调用`increment`mutation来更新共享变量的值。 现在你就可以在任何Vue组件中使用共享变量了,它将在整个项目中共享。注意,在使用时要注意共享变量的生命周期问题,确保它的数据在需要的时候被正确地初始化和清理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值