如何在定义全局访问属性时使 vuex 变干？

Question

我在 $store 中有一些通用状态，例如 error 和 session，我希望按计算结果访问这些状态属性 error 和 session在所有组件中（包括路由器中的组件）。我知道我应该这样做：

var store = new Vuex.Store({
  state: {
    error: undefined,
    session: JSON.parse(localStorage.getItem('session')),
  },
  mutations: {
    error: function(state, error) {
      state.error = error
    },
    session: function(state, session) {
      state.session = session
    },
  },
})

var loginView = new Vue({
  computed: {
    error: {
      get () {
        return this.$store.state.error
      },
      set (val) {
        this.$store.commit('error', val)
      }
    },
    session: {
      get () {
        return this.$store.state.session
      },
      set (val) {
        this.$store.commit('session', val)
      }
    },
  },
})

var router = new VueRouter({
  routes: [
    {
      path:'/login', 
      component: loginView,
    },
  ],
})

var app = new Vue({
  store,
  router,
  computed: {
    error: {
      get () {
        return this.$store.state.error
      },
      set (val) {
        this.$store.commit('error', val)
      }
    },
    session: {
      get () {
        return this.$store.state.session
      },
      set (val) {
        this.$store.commit('session', val)
      }
    },
  },
})

如您所见，它不是干的。如果我在路由器中有 100 个组件并且我希望它们能够具有这样的计算属性怎么办？有什么办法可以解决这个问题吗？也许像 Vuex 中的选项 globals:

var store = new Vuex.Store({
  globals: ['error', 'session'], // this will enable all components' computed property of error and session
  state: {
    error: undefined,
    session: JSON.parse(localStorage.getItem('session')),
  },
  mutations: {
    error: function(state, error) {
      state.error = error
    },
    session: function(state, session) {
      state.session = session
    },
  },
})

var loginView = new Vue({
  computed: {
  },
})

var router = new VueRouter({
  routes: [
    {
      path:'/login', 
      component: loginView,
    },
  ],
})

var app = new Vue({
  store,
  router,
  computed: {
  },
})

Answer 1

我在文档中没有看到 Vuex 支持 set 计算值的任何地方。如果是这样，您可能最好使用 mapGetters.

如果你想遵循 Vuex 的精神，我希望最好的方法是利用 mapGetters 和 mapActions/mapMutations 并将您的 set 映射到 action/mutation.

您也可以使用 mixin 来完成此操作。我知道你说你想全局定义这些值（你可以用全局混合来实现），但是你可以通过定义一个具有这些属性的混合来保持干燥，并将它应用到你实际 需要的地方他们。

最后你可以使用 global mixin。请注意链接文档中使用全局混合的注意事项。

Vue.mixin({
  computed: {
    error: {
      get () {
        return this.$store.state.error
      },
      set (val) {
        this.$store.commit('error', val)
      }
    },
    session: {
      get () {
        return this.$store.state.session
      },
      set (val) {
        this.$store.commit('session', val)
      }
    },
  }
})

error 是一个非常通用的名称，如果这意味着每个组件的属性，您可能需要重新考虑它。

如何在定义全局访问属性时使 vuex 变干？

How to make vuex DRY when defining global accessed property?

vue.js

vuejs2

vuex

如何在定义全局访问 属性 时使 vuex 变干？

How to make vuex DRY when defining global accessed property?

vue.js

vuejs2

vuex

如何在定义全局访问属性时使 vuex 变干？