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
})

我们的module1的一个例子可能是：

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');

请注意，我们没有使用任何命名空间，但因为我们没有在模块中包含任何重复的突变，所以绝对可以隐式声明这一点。

现在，如果我们想使用命名空间，我们可以执行以下操作，明确使用模块：

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

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

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

2 个答案: