vue.js - 如何在定义全局访问属性时使 vuex DRY？

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并将您的集映射到操作/突变。

您还可以使用mixin去做这个。我知道您说过您想在全局范围内定义这些值(您可以使用全局 mixin 来实现)，但您可以通过定义具有这些属性的 mixin 来保持 DRY 并将其应用到您实际需要的地方 .

最后你可以使用 global mixin 。请注意链接文档中使用全局 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 是一个非常通用的名称，如果它是每个组件的属性，您可能需要重新考虑它。