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>