Блог

Главная - Вопросы по программированию - Vue/Vuex: состояние карты внутри вычисленного не обновляется

Vue/Vuex: состояние карты внутри вычисленного не обновляется

#vue.js #vuex

Вопрос:

Я пытаюсь использовать mapState и сталкиваюсь с проблемами с реактивными данными. У меня есть следующее внутри моего Test.vue компонента

  <template>
    <div> {{ name }} </div>
 </template>

computed: {
     ...mapState('user', ['age','name]
}

когда мое состояние user.name обновляется за пределами Test.vue компонента, новое значение не отображается внутри Test.vue .

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

 [SET_USER_NAME_MUTATION](state, value) {
      state.name = value;
},


commit('SET_USER_NAME_MUTATION', "John")

теперь в моем магазине Vuex, когда я проверяю chrome DevTools, user { name: "John" } , что правильно

Комментарии:

1. Покажите, как вы обновляетесь user.name . Какую версию Vue вы используете?

2. только что обновлено… Я обновляю состояние с помощью мутаций в user магазине. Кроме того, используя Vue 2

3. Можете ли вы поделиться ссылкой на воспроизведение проблемы?

4. Я предполагаю, что пропущенное ' в конце ...mapState('user', ['age','name] присутствует в вашем реальном коде?

Ответ №1:

Вы должны изменить состояние с помощью действий vuex вместо прямого вызова мутации. Попробуйте сделать что-то подобное, предположив, что ваше состояние содержит user объект со name свойством:

Компонент Vue

 <template>
    <div> 
        <span>{{ name }}</span> 
        <button @click="changeName">Change name</button>
    </div>
 </template>

<script>
import { mapState } from 'vuex'

export default {
    name: 'MyComponent',

    computed: {
        ...mapState({
            name: state => state.user.name
        })
    },

    methods: {
        changeName () {
            this.$store.dispatch('changeName', 'John Smith')
        }
    }
}
</script>

Магазин Vuex

 // state
const state = {
    user: {
        name: null
    }
}

// getters
const getters = {
    // ...
}

// actions
const actions = {
    changeName ({ commit }, payload) {
        commit('setName', payload)
    }
}

// mutations
const mutations = {
    setName (state, payload) {
        state.user.name = payload
    }
}

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

В любом случае, будет очень полезно знать структуру вашего государства, чтобы лучше подходить к вашему конкретному случаю

Метки: