Vuex 状态更改在 main store 中工作，但在导入到 main store 的模块中不起作用

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 devtool，我发现 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/

Vuex 状态更改在 main store 中工作，但在导入到 main store 的模块中不起作用

Vuex state changes work in main store, but does not work in a module that is imported into the main store

vuejs2

vuex

vuex-modules