Vuex 4 createStore() 内部是如何工作的

Question

我在理解 Veux 4 createStore() 的工作原理时遇到一些困难。

在 /store/index.js 我有（除其他外）：

export function createVuexStore(){
   return createStore({
            modules: {
                userStore,
                productStore
            }
      })
}

export function provideStore(store) {
provide('vuex-store', store)

}

在 client-entry.js 中，我像这样将商店传递给 makeApp()：

import * as vuexStore from './store/index.js';
import makeApp from './main.js'
const _vuexStore = vuexStore.createVuexStore();

const {app, router} = makeApp({
    vuexStore: _vuexStore,
});

并且 main.js 默认方法执行此操作：

export default function(args) {
    const rootComponent = {
        render: () => h(App),
        components: { App },
        setup() {
            vuexStore.provideStore(args.vuexStore)
        }
    }

    const app = (isSSR ? createSSRApp : createApp)(rootComponent);
    app.use(args.vuexStore);

因此，没有从任何地方导出的 store，这意味着我无法将 store 导入另一个 .js 文件，例如我的 vue-router 并访问 getters 或 dispatch 操作。

import {store} '../store/index.js' // not possible

为了完成这项工作，我在 vue-router.js 文件中做了以下工作但我不明白为什么它工作：

import * as vuexStore from '../store/index.js'
const $store = vuexStore.createVuexStore();

async function testMe(to, from, next) {
   $store.getters('getUser'); // returns info correctly
   $store.dispatch('logout'); // this works fine
}

Veux 的 createStore() 方法是每次都创建一个全新的商店，还是对 client-entry.js 中创建的同一商店的引用？看来是后者，那是不是说一个应用无论你运行createStore()多少次都只有一个store？那么，为什么运行ning createStore() 不覆盖现有存储并用空白值初始化它？

Answer 1

createStore() 方法可用于您的设置方法。

在你的 main.js 上，你可以做这样的事情

import { createApp } from 'vue'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

store.js

import { createStore } from 'vuex';

export default createStore({
  state: {},
  mutations: {},
  actions: {},
});

要访问您的商店，您不再需要导入 store.js，您只需使用新的 useStore() 方法来创建对象即可。您可以像往常一样直接使用它访问您的商店。
your-component.js

<script>
import { computed } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();

    const isAuthenticated = computed(() => store.state.isAuthenticated);
    const logout = () => store.dispatch("logout");
    return { isAuthenticated, logout };
  },
};
</script>

要在 route.js 文件中使用您的 store，您可以简单地以旧方式导入。 route.js

import Home from '../views/Home.vue'
import store from '../store/'

const logout = () => {
  store.dispatch("auth/logout");
}

export const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

Vuex 4 createStore() 内部是如何工作的

How does Vuex 4 createStore() work internally

vue.js

vuex

vuejs3

vuex4