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状态更改在主存储中起作用，但在导入到主存储中的模块中不起作用

1 个答案: