Question

我确实读过所有Google！

商店属性“ sProp”具有初始值（= 10）;
我使用组件中的Action来修改属性；
存储模块内的动作COMMITS突变；
如许多票证中所述，静音使用“ Vue.set（...）”
组件使用mapState，mapGetters，mapActions（!!!）
我也建议Vuex参与其中。

我看到初始状态是10。但是按下按钮后它没有改变。但是，如果我使用console.log存储，则会看到它已更改。第一次按下后，它也只能在内存中更改一次，但是两种变体的模板始终显示10。所有其他按不更改值。

问题：我的计算财产不活跃！

考虑最简单的示例。文件名在注释中。

// File: egStoreModule.js
import * as Vue    from "vue/dist/vue.js";

const state = {
    sProp:         10,
};

const getters   = {
    gProp: (state) => {
        return state.sProp;
    }
};
const mutations = {
    //generic(state, payload) {},
    mProp(state, v) {
        Vue.set(state, "sProp", v);
    },
};
const actions   = {
    aProp({commit}, v) {
        commit('mProp', v);
        return v;
    },
};

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

它是消费者：

// File: EgStoreModuleComponent.vue
<template>
    <!--<div :flag="flag">-->
    <div>
        <div><h1>{{sProp}} : mapped from Store</h1></div>
        <div><h1>{{$store.state.egStoreModule.sProp}} : direct from Store</h1></div>
        <button @click="methChangeProp">Change Prop</button>
        <button @click="log">log</button>
    </div>
</template>

<script>
    import {mapActions, mapGetters, mapState} from "vuex";

    export default {
        name:     'EgStoreModuleComponent',
        data() {
            return {
                flag:      true,
            };
        },

        computed: {
            ...mapState('egStoreModule', ['sProp']),
            ...mapGetters('egStoreModule', ['gProp'])
        },

        methods: {
            ...mapActions('egStoreModule', ['aProp']),

            methChangeProp() {
                const value = this.sProp + 3;
                this.aProp(value);
                //this.flag = !this.flag;
            },

            log() {
                console.log("log ++++++++++");
                console.log(this.sProp);
            },
        }
    }
</script>

<style scoped>
</style>

这是我将商店模块加入应用程序的方式：

// File: /src/store/index.js
import Vue           from 'vue'
import Vuex          from 'vuex'
import collection    from "./modules/collection";
import egStoreModule from "./modules/egStoreModule";

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {},
    getters : {},
    mutations: {},
    actions : {},
    modules : {
        collection,
        egStoreModule
    }
});

最后：main.js

import Vuex       from 'vuex'
import {store}    from './store'
//...
new Vue({
    el:     '#app',
    router: router,
    store,
    render: h => h(App),
})

如果我仅使用“ flag”字段（如注释中所示），那么所有方法都可以使用。
如果我使用Vue-router从页面跳回，也可以使用。
异步/等待无济于事。
我删除了node_modules下的所有内容，并运行npm install。
所有Vue / Vuex版本均为最新版本。

Vuex。再次：存储更改后，不会更新计算的属性。最简单的例子

0 个答案: