1

我正在尝试使用突变更改 Vuex Store 的状态，并且我的应用程序中也有路由。在我的默认组件（第一个路由）中，有一个更改我的 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>
4

0 回答 0