Почему мой магазин не обновляется, когда я использую глубокие часы? - PullRequest
Новая
       15

Почему мой магазин не обновляется, когда я использую глубокие часы?

0 голосов
/ 06 июня 2019

Глубокий наблюдатель, который я установил для этого компонента, не обновляет хранилище при изменении значения текстового поля.Я не могу найти способ правильно изменить пару ключ / значение объекта хранилища (профиль) (groupName: string )

Profile.vue Элемент : 

<v-text-field v-model="profileData.groupName" label="Group Name"></v-text-field>

Profile.vue JS : 

import { mapGetters, mapMutations } from "vuex";

export default {
  name: "Profile",
  created() {
    this.profileData = JSON.parse(JSON.stringify(this.getProfile()));
    console.log(this.profileData);
  },
  data() {
    return {};
  },
  methods: {
    ...mapGetters(["getProfile"]),
    ...mapMutations(["setProfile"])
  },
  watch: {
    profileData: {
      handler(value) {
        this.setProfile(value);
      },
      deep: true
    }
  }
};

build.js ( Модуль store.js ): 


const state = {
    profile: {
        "groupName": "Happy group",
        "groupNumber": "9999999999",
        "groupContact": "Bob Ross"
    }
};

const getters = {
    getProfile: (state) => state.profile,
};

const actions = { };

const mutations = { 
    setProfile: (state, profile) => (state.profile = profile)
};

export default {
    state,
    getters,
    actions,
    mutations,
}

Я не уверен, почему состояние не обновляется.Кто-нибудь знает?

Спасибо, что прочитали

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

Это потому, что Vue позволяет вам напрямую изменять состояние vuex, когда он не в строгом режиме.Если вы включите строгий режим, любая мутация вне обработчика мутации вызовет ошибку. 

export default {
  state,
  getters,
  actions,
  mutations,
  strict: true
}

В руководстве Vuex упоминается здесь .Вы также можете включить его только для разработки 

strict: process.env.NODE_ENV !== 'production'
0 голосов
/ 06 июня 2019

Вы не должны связывать переменную состояния , как вы это сделали здесь: v-model="profile.groupName" (на практике вы изменяете подпорку вне мутации vuex, и вы, вероятно, получаете некоторое консольное предупреждение об этом).

Таким образом, вы можете скопировать значение getProfile в локальную переменную (vue's data()) и отправить действие для обновления profile в состоянии, когда вы хотите (в соответствии с обработчиком или чем-то еще).

...