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

Question

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

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

所以，每当我想访问info 时，我通常都会使用这样的方法；

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

这只是为了演示目的，实际上我的情况要差一些，但我最终还是这样做了，所以我尝试使用计算的 prop 最小化代码：

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

现在，我只调用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 派上用场的一个很好的例子是当我们在一个大型项目中处理许多组件时，我们希望能够查看我们的源代码而不必担心前端实现。