Блог

У меня возникли некоторые трудности с пониманием того, как createStore() работает Veux 4.

Во /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
}
 

createStore() Создает ли метод Veux каждый раз новый новый магазин или это ссылка на тот же магазин, в котором он был создан client-entry.js ? Похоже, что это последнее, так означает ли это, что у приложения есть только одно хранилище, независимо от того, сколько раз вы запускаете createStore() ? Почему же тогда выполнение createStore() не перезаписывает существующее хранилище и не инициализирует его пустыми значениями?

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
  }
]