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，这意味着我无法在另一个.js 文件中导入store，例如我的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()，应用程序都只有一个商店？那么，为什么运行 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
  }
]