如何将Vuex存储注入Vue 3

问题描述

我如何将vuex注入Vue 3，在Vue 2中可能是这样的：

new Vue({
  el: '#app',store: store,})

但是在Vue 3中，由于没有new Vue()，您将如何做。

解决方法

创建的商店将使用.use方法注入：

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

// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

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

// Install the store instance as a plugin
app.use(store)

有关更多详细信息，请检查Vuex 4 docs

要在选项api的子组件中使用它，请尝试如下提供它：

app.use(store)

app.config.globalProperties.$store=store;

然后在子组件中像$store一样使用它

对于composition api（设置挂钩），您只需导入useStore可组合函数即可返回商店实例：

import {useStore} from 'vuex'
setup(){
const store=useStore()// store instead of `$store`


}