如何使用更短的路径获取 vuex 内容？

Question

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

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

因此，每当我想访问 info 时，我通常会在我的方法中这样做；

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

这只是为了演示目的，我的实际上有点糟糕，但我最终还是这样做了，所以我尝试使用计算道具最小化代码：

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

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

还有其他方法吗

Answer 1

我总是将 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'
    ])
  }
}

Answer 2

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

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 很有用，但是当我们可以整齐地消化模块而不必连续映射所有内容时，它们会提供很多额外的开销，除非我们发现映射很有用。 MapGetters 变得方便的一个很好的例子是，当我们在一个大型项目中处理许多组件时，我们希望能够查看我们的源代码而不必担心前端实现。

如何使用更短的路径获取 vuex 内容？

How to use shorter path to get vuex contents?

vue.js

vuejs2

vuex