Question

我有一个带子模块的数据存储区，都有一个变量：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    namespaced: true,
    state: {
        foo: true,
    },
    modules: {
        secondmodule: {
            namespaced: true,
            state: {
                bar: 0,
            },
            mutations: {
                updateBar: (state, value) => {
                    state.bar = value;
                }
           }
        }
    }
})

在我的应用中，当foo的值更改为true时，我想显示一个快餐栏2秒钟：

<template>
    <v-app id="example-1">
        <router-link :to="{ name: 'secondpage'}">Link</router-link>
        {{data.connected}}
        {{this.$dataStore.state.foo}}
        <main>
            <v-fade-transition mode="out-in">
                <router-view></router-view>
            </v-fade-transition>
        </main>
        <v-snackbar success top :timeout="2000" v-model="data.connected">
            connection established!
        </v-snackbar>
    </v-app>
</template>

<script type="text/babel">
    export default {
        computed:{
            data() {
                return {
                    connected: this.$dataStore.state.foo,
                    bar: this.$dataStore.state.secondmodule.bar
                }
            }
        },
    };
</script>

由于foo初始化为true，因此快餐栏会在启动时显示 -

奇怪的是，当我点击第二页的链接时，会改变bar变量：

created() {
   this.$dataStore.commit('secondmodule/updateBar', 1)
}

小吃栏再次显示，我发现connected在点击链接后很快变为false并再次变为true。值foo始终为true且从未更改过，因此计算属性connected如何更改？

编辑：由于我没有提供工作小提琴，我在这里添加了代码，如果有人想看看它

https://github.com/netik25/vueProblem

VueJS2 / Vuex计算属性不符合预期

0 个答案: