0

我很难理解 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并访问gettersordispatch操作。

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()不会覆盖现有存储并使用空白值对其进行初始化？

4

1 回答 1

3

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>

要store在route.js文件中使用您的，您可以简单地导入旧时尚方式。 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
  }
]
于 2021-05-15T15:27:00.943 回答