vuex module appState не работает с пространством имен модуля, переданным в качестве первого аргумента - PullRequest
Новая
       13

vuex module appState не работает с пространством имен модуля, переданным в качестве первого аргумента

2 голосов
/ 08 июля 2019

если я попытаюсь передать пространство имен в качестве первого аргумента, как это предусмотрено документами, я получу «undefined» в качестве значения («test» установлено в определении модуля) 

...mapState('guest', {
    email: state => state.email,
}),

, ноэто работает нормально, если я просто делаю это таким образом без пространства имен в качестве первого аргумента 

...mapState({
    email: state => state.guest.email,
}),

Я хотел бы использовать ярлык и, согласно документации, первый пример должен работать ... верно?

https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace

Вот мое определение модуля: 

const initialState = function(){
    let state = {
        email: null,
    };

    return state;
};    

export default {
    namespaced: true,
    state: initialState(),
    mutations: {
        fill(state, data) {
            Object.assign(state, data);
        },
        reset(state) {
            Object.assign(state, initialState());
        }
    },
    actions: {
    }
};

1 Ответ

3 голосов
/ 08 июля 2019

Ваш синтаксис computed...mapState правильный, поэтому, скорее всего, проблема в том, как вызывается мутация заполнения. Вы называете пространство коммитом?

Это рабочий пример .

Единственное, что нужно изменить, это state: initialState должно быть state: Object.assign({}, initialState).

Первый способ устанавливает состояние для ссылки на объект initialState, поэтому любые изменения в мутации заполнения перезаписывают значения initialState, и мутация сброса не будет иметь никакого эффекта.

Компонент 

export default {
  ...
  computed: {
    ...mapState("guest", {
      email: state => state.email
    })
  },
  mounted() {

    // Call the fill mutation with namespace
    this.$store.commit("guest/fill", {
      email: "some@email"
    });

    // Call reset after 2 seconds 
    setTimeout(() => {
      this.$store.commit("guest/reset");
    }, 2000);
  }

магазин 

const initialState = {
  name: "dummyName",
  email: "dummy@initial" // put a value here so we can see if mapState works
};

const store = new Vuex.Store({
  modules: {
    guest: {
      namespaced: true,
      state: Object.assign({}, initialState),
      mutations: {
        fill(state, data) {
          Object.assign(state, data);
        },
        reset(state) {
          Object.assign(state, initialState);
        }
      }
    }
  }
});
...