如何从模块访问商店中的状态对象?

时间:2021-04-27 08:07:38

标签: vuex vuejs3 vuex-modules

我的模块中需要来自上面商店对象的数据,但我无法访问它。

我有一个商店对象

这个商店对象有一个或多个它使用的模块。

我正在尝试:index.js

import { createStore } from "vuex";

import moduleLayout from "./modules/moduleLayout.js"

export default createStore({
      state:{
           testData:'Hello World!'
      },
      modules: { moduleLayout }
})

并有一个 moduleLayout.js

export default {
  state:{
     size:100   
  },
  getters:{
        getSizeAndText:(state)=>{
             return {size:state.size,text:this.state.testData};
             
             //error here, because (this)undefined
             
             //how can i access on here testData
        }
  }
}

我无法从 moduleLayout.js 访问 testData 数据

1 个答案:

答案 0 :(得分:0)

您没有将模块添加到商店。

import { createStore } from "vuex";

import moduleLayout from "./modules/moduleLayout.js";

export default createStore({
  state: {
    testData: 'Hello World!'
  },
  modules: {
    layout: moduleLayout
  }
})

导入 store inside 模块以访问未由模块命名空间的状态:

import store from '../index.js'; // whatever the path of where you create and export store

const state = {
    size: 100
}

const getters = {
    getSizeAndText(state) {
        return {
            size: state.size,
            text: store.state.testData
        }
    }
}

export default {
    state,
    getters
}