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映射到动作/变异。

您也可以使用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是一个非常通用的名称，如果这是每个组件的属性，您可能需要重新考虑它。

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

1 个答案: