Question

我正在尝试通过突变更改Vuex商店的状态，并且我的应用程序中也有路由。在我的默认组件中（第一条路线）有一个按钮可以更改我的user.name状态，而我还有第二个组件（第二条路线）可以向我显示user.name。在我的第一个组件中，当我调用该突变来更改user.name状态时，它将向我显示新的user.name，但这与第一个状态没有什么不同。

例如：在我的第一个user.name状态下，我具有“ John Dave”，并且当我单击调用突变CHANGE_USER（）的按钮时，必须将其更改为“ David Lionel”，但不起作用。

商店

export default new Vuex.Store({
    state: {
        user: {
            name: 'John Dave',
        },
    },
    mutations: {
        changeUser (state, payload) {
            state.user = payload;
        }
    },
    getters: {
        getName(state) {
            return state.user;
        }
    }
});

第一个组件

<template>
    <div>
        {{user}}
    </div>
</template>

<script>
    export default {
        computed: {
            user() {
                const { name } = this.$store.getters.getName;
                return name;
            },

        },
    };
</script>

第二部分

<template>
  <div>
    {{user}}
    <button @click="changeUser() ">
      Change user
    </button>
  </div>
</template>

<script>
  export default {
    computed: {
      user() {
        const { name } = this.$store.state.user;
        return `My user is ${name}`
      },
    },

    methods: {
      changeUser() {
        const payload = {
            name: 'Name changed',
            email: 'vitor@v.cm',
            level: 'ADM',
        };

        this.$store.commit('changeUser', payload);
      },
    }
  };
</script>

Vuex在不同路由中的更改状态

0 个答案: