如何在Vue自定义组件（root.ce.vue）中注册Vuex插件？

可以直接导入你创建好的Store实例来使用，不需要依赖useStore()或者app.use(store)的注入流程，具体实现方式如下：

1. 确保Store实例独立导出 #

假设你的Store定义在单独文件（比如store/index.js）中，需要将创建好的实例直接导出：

// store/index.js
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

2. 在root.ce.vue中直接导入使用 #

在root.ce.vue文件里，直接导入这个Store实例，就能直接访问状态、调用mutations/actions等方法：

<template>
  <div>当前计数：{{ store.state.count }}</div>
  <button @click="handleIncrement">增加</button>
</template>

<script setup>
import store from './store/index.js'

const handleIncrement = () => {
  store.commit('increment')
}
</script>

注意事项 #

• 这种方式跳过了Vue的依赖注入机制，Vue Devtools的状态追踪可能会受影响，但基础的状态读写、方法调用功能完全正常。
• 由于模块导出的实例是单例的，直接导入的方式依然能保证组件和其他部分共享同一状态。
• 后续如果有条件使用依赖注入，只需将直接导入的代码替换为useStore()调用即可，业务逻辑无需修改。

内容的提问来源于stack exchange，提问作者temp