如何将 Vuex 商店注入 Vue 3

Question

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

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

但是在 Vue 3 中你会怎么做，因为没有new Vue() 。

Answer 1

创建的商店将使用.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 文档

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

app.use(store)

app.config.globalProperties.$store=store;

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

对于组合 api（设置挂钩），您可以只导入useStore组合函数，该函数返回存储实例：

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


}

Answer 2

与路由器一起：

import * as Vue from 'vue';
import App from './App.vue';
import router from './routes';
import {store} from "./store/store";

Vue.createApp(App).use(router, store).mount('#app');