Vue.js 如何使用较短路径获取vuex内容？

在我的vuex/store/state.js中，我有一个导出默认值，如下所示：

export default {
  foo: {
    bar:{
      tar: {
        info: 42
      }
    } 
  }
} 

所以，每当我想访问

信息

，我通常都会这样做

methods: {
  getInfo () {
   return this.$store.state.foo.bar.tar.info
  }
}

这只是为了演示的目的，而我的情况实际上有点糟糕，但我最终还是做了同样的事情。因此，我尝试使用计算道具最小化代码：

computed: {
  info () {
    return this.$store.state.foo.bar.tar.info
  }
}

现在，我只调用

info

，但仍然不确定是否有更好的方法来获取值，因为有时我只需要调用页面中的一个信息，所以我必须使用完整路径或为其创建计算属性

---

是否有其他方法可以做到这一点

我总是将vuex分离到单独的模块中。例如，如果您有用于foo模块的存储。我将创建名为

foo.js

的文件，其中包含

const fooModule = {
  state: {
    foo: {
      bar: {
        tar: {
          info: 42
        }
      }
    }
  },
  getters: {
    info (state) {
      return state.foo.bar.tar.info
    }
  },
  mutations: {
    setInfo (state, payload) {
      state.foo.bar.tar.info = payload
    }
  },
  actions: {
    getInfo ({commit}, payload) {
      commit('setInfo', payload)
    }
  }
}

export default fooModule

然后在主索引vuex中，按如下方式导入模块

import Vue from 'vue'
import Vuex from 'vuex'

import fooModule from './foo.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    fooModule
  }
})

export default store

如果你想得到信息，你只需要这样写你的代码

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'getInfo'
    ])
  }
}

---

我总是将vuex划分为不同的模块。例如，如果您有用于foo模块的存储。我将创建名为

foo.js

的文件，其中包含

const fooModule = {
  state: {
    foo: {
      bar: {
        tar: {
          info: 42
        }
      }
    }
  },
  getters: {
    info (state) {
      return state.foo.bar.tar.info
    }
  },
  mutations: {
    setInfo (state, payload) {
      state.foo.bar.tar.info = payload
    }
  },
  actions: {
    getInfo ({commit}, payload) {
      commit('setInfo', payload)
    }
  }
}

export default fooModule

然后在主索引vuex中，按如下方式导入模块

import Vue from 'vue'
import Vuex from 'vuex'

import fooModule from './foo.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    fooModule
  }
})

export default store

如果你想得到信息，你只需要这样写你的代码

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'getInfo'
    ])
  }
}

---

@jefry Dewangga的想法是正确的，但是引入Mapgetter是没有必要的

VueX默认包括模块的名称空间，这允许我们将多个模块加载到一个存储中，然后使用或不使用名称空间对它们进行引用，剩下的问题将由VueX解决

例如，如果我们有

|-- store
  |-- Modules
    |-- module1.js
    |-- module2.js
    |-- module3.js
|-- index.js

我们可以通过以下方式使用索引将所有模块绑定到Vuex存储中：

import Vue from 'vue'
import Vuex from 'vuex'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
    modules
})

模块1的一个示例可以是：

const state = {
    LoggedIn: true
}

const mutations = {
    LOGIN(state) {
        state.LoggedIn = true;
    },
    LOGOFF(state) {
        state.LoggedIn = false;
    }
}

const actions = {}

export default {
    state,
    mutations,
    actions
}

这反过来使我们能够说：

this.$store.commit('LOGIN');

请注意，我们没有使用任何名称空间，但由于我们没有在模块中包含任何重复的突变，因此可以隐式声明这一点

现在，如果我们想使用名称空间，我们可以执行以下操作，这将显式使用out模块：

this.$store.module1.commit('LOGIN');

---

MapGetter是有用的，但如果我们不需要连续映射所有模块，就可以灵活地消化模块，那么它们会提供大量额外的开销，除非我们发现映射很有用。当我们在一个大型项目中使用许多组件时，我们希望能够查看源代码，而不必担心前端实现。

@jefry-Dewangga的想法是正确的，但引入Mapgetter是不必要的

VueX默认包括模块的名称空间，这允许我们将多个模块加载到一个存储中，然后使用或不使用名称空间对它们进行引用，剩下的问题将由VueX解决

例如，如果我们有

|-- store
  |-- Modules
    |-- module1.js
    |-- module2.js
    |-- module3.js
|-- index.js

我们可以通过以下方式使用索引将所有模块绑定到Vuex存储中：

import Vue from 'vue'
import Vuex from 'vuex'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
    modules
})

模块1的一个示例可以是：

const state = {
    LoggedIn: true
}

const mutations = {
    LOGIN(state) {
        state.LoggedIn = true;
    },
    LOGOFF(state) {
        state.LoggedIn = false;
    }
}

const actions = {}

export default {
    state,
    mutations,
    actions
}

这反过来使我们能够说：

this.$store.commit('LOGIN');

请注意，我们没有使用任何名称空间，但由于我们没有在模块中包含任何重复的突变，因此可以隐式声明这一点

现在，如果我们想使用名称空间，我们可以执行以下操作，这将显式使用out模块：

this.$store.module1.commit('LOGIN');

---

MapGetter是有用的，但如果我们不需要连续映射所有模块，就可以灵活地消化模块，那么它们会提供大量额外的开销，除非我们发现映射很有用。

magetter

变得方便的一个很好的例子是当我们在一个大型项目中使用许多组件时，我们希望能够查看源代码而不必担心前端实现。

您可以在vuex状态中编写getter。@puelo这实际上是我一直在尝试学习的东西大约，但不知道怎么做。你有任何链接吗？一个getter可能会有所帮助，但你应该问问自己，你是否真的需要嵌套那么深的东西。如果你打算这么做，很可能你的商店做得太多了，你只需要把你的商店分成多个模块。@hidar我和Stephan-v在一起。我总是尽量避免将复杂的嵌套对象放入状态。关于getter，文档解释得很好。您可以在vuex状态中编写getter。@puelo这实际上是我一直试图了解的内容，但不知道如何完成。你有任何链接吗？一个getter可能会有所帮助，但你应该问问自己，你是否真的需要嵌套那么深的东西。如果你打算这么做，很可能你的商店做得太多了，你只需要把你的商店分成多个模块。@hidar我和Stephan-v在一起。我总是尽量避免将复杂的嵌套对象放入状态。关于getters，文档解释得很好。我注意到这可能被视为偏离主题，但采用基于模块的策略将有助于阻止他使用深度嵌套。我注意到这可能被视为偏离主题，但采用基于模块的策略将有助于阻止他使用深度嵌套。