如何从模块访问存储中的状态对象？

Question

我需要来自我的模块中上面的存储对象的数据，但我无法访问它。

我有一个商店对象

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

我试过了: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 数据

Answer 1

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

import { createStore } from "vuex";

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

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

导入模块内的存储以访问模块未命名空间的状态：

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
}

Answer 2

无需导入 index.js。

我们可以通过扩展参数字段来访问它。

关于“index.js”

import moduleTest from "./modules/moduleTest";

export default{
    state:{
        size:100
    },
    modules:{
        moduleTest:moduleTest
    }
}

关于“moduleTest.js”

export default{
    state:{
        testSize:20
    },
    getters: {
        getSumSize(thisState, getters, state) {
            return thisState.testSize+state.size;//this result 120
        },
        getSumSizeWithParam:(thisState, getters, state) =>(index)=>{
            return (thisState.testSize+state.size)*index;//this result 120*index
        }
    }
}

你绝对不需要导入index.js。

如何从模块访问存储中的状态对象？

How do I access my state object in store from module?

vuex

vuejs3

vuex-modules