Vuex 状态更改在主存储中起作用，但在导入主存储的模块中不起作用

Question

首先，在这美好的一天，大家好。我创建了一个简单的 jsfiddle，我将用它作为示例来描述我的问题。

https://jsfiddle.net/Mertakus/cokedgm2/13/

我遇到的问题是，虽然这个 jsfiddle 可以改变消息的状态，但在我正在使用的 Vue 应用程序中，我将我的商店划分为模块，否则我的商店会变得臃肿。

所以我得到了一个 basic.js 文件，我在其中执行与 jsfille 中完全相同的操作，并在我的 store.js 文件中导入该文件并注册该文件。例如：

export default {
    strict: true,

    state: {
        fields: mainFields.basic,

        message: 'Hello Vuex'
    },
    getters: {
        getBasic: state => state
    },
    mutations: {
        updateMessage (state, message) {
            state.message = message
        }
    }
}

我的主 store.js 文件：

import Vue from "vue"
import Vuex from "vuex"
import basic from "./modules/basic"

Vue.use(Vuex)

export default new Vuex.Store ({
    // strict: true, 
    modules: {
        basic
    },
    // If I uncomment this, it'll work
    // state: {
    //     message: 'Hello Vuex'
    // },
    // mutations: {
    //     updateMessage (state, message) {
    //         state.message = message
    //     }
    // }
})

由于某种原因，这不起作用。使用 Vue 开发工具，我发现 updateMessage 突变确实被触发了，并且有效负载被更新，但是它没有显示在屏幕上。当我复制 -> 将上述逻辑粘贴到主 store.js 文件中时，它会呈现在屏幕上。

Answer 1

由于是vuex模块，所以需要使用this.$store.state.basic.message代替。

const basic = {
 strict: true,

    state: {

        message: 'Hello Vuex'
    },
    getters: {
        getBasic: state => state
    },
    mutations: {
        updateMessage (state, message) {
            state.message = message
        }
    }
}
const store = new Vuex.Store({
     modules: {
        basic
    },
})

new Vue({ 
    store,
    el: '#app',
    computed: {
        message: {
            get () {
               console.log(this.$store.state)
                return this.$store.state.basic.message
            },
            set (value) {
                this.$store.commit('updateMessage', value)
            }
        }
    },
    methods: {
        updateMessage (e) {
            this.$store.commit('updateMessage', e.target.value)
        }
    }
})

在这里演示https://jsfiddle.net/ittus/0n183xty/1/