如何將 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');