Vue3如何在组件中定义单独的store

 文章来源：

首先，定义页面组件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>