Vue3如何在組件中定義單獨的store

 文章來源：https://www.cnblogs.com/flicat/p/15813765.html

首先，定義頁面組件store，同時引入全局store（如果有需要用到全局store的話）到 modules：

// store.js
import global from '@/store'
import { createStore } from "vuex"

const store = createStore({
  state: {
    userInfo: null
  },
  mutations: {

  },
  actions: {},
  modules: {
    global
  }
})

export default store

第一種：在頁面組件中引入store並注冊：

// page.vue
<script setup>
import { getCurrentInstance } from 'vue';
import store from './store';

const app = getCurrentInstance()
app.appContext.app.use(store, 'my_child_store')
</script>

注意：在use注冊新的store時必須傳入第二個參數key來確保注冊的store的唯一性。

最后，在頁面組件中使用單獨定義的store：

// page_child.vue
<script setup>
import { useStore } from "vuex";
const store = useStore('my_child_store')
</script>

 第二種：直接引入，通過provide/inject 傳遞給子組件 

<script setup>
import { provide} from 'vue';
import store from './store';

provide('my_child_store', store)
</script>

在子組件中使用store

<script setup>
import { inject } from "vue";

const store = inject('my_child_store')
</script>