글로벌 액세스 속성을 정의할 때 vuex DRY를 설정하는 방법

글로벌 액세스 속성을 정의할 때 vuex DRY를 설정하는 방법

나는 다음과 같은 일반적인 상태를 가지고 있다.error그리고.session$store에서 계산 속성으로 액세스하고 싶다.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개의 컴포넌트가 있는데, 이러한 컴포넌트에 대해 이러한 속성을 계산할 수 있도록 하려면 어떻게 해야 합니까?이 문제를 해결할 방법이 있을까요?어쩌면 옵션 같은 것globalsVuex의 경우:

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: {
  },
})

매뉴얼 어디에도 Vuex가 지원하는 것은 없습니다.set계산된 값의.만약 그렇다면, 당신은 아마 그것을 사용하는 것이 더 나을 것이다.mapGetters.

Vuex의 정신을 따르고 싶다면 mapGetters와 mapActions/mapMutations를 활용하여 mapGetters와 mapActions/mapMutations를 매핑하는 것이 최선의 접근법이 될 것입니다.set행동/행동/행동에 따라.

믹스인을 사용하여 이 작업을 수행할 수도 있습니다.이러한 값을 글로벌하게 정의하고 싶다고 말씀하셨는데(글로벌 믹스인을 사용하여 정의할 수 있습니다), 이러한 속성을 가진 믹스인을 정의하고 실제로 필요한 곳에 적용할 수 있습니다.

마지막으로 글로벌 믹스인을 사용할 수 있습니다.링크된 문서에서 글로벌 믹스인을 사용하는 경우의 주의 사항에 유의하십시오.

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는 꽤 일반적인 이름이기 때문에 이것이 모든 컴포넌트의 속성이라면 다시 생각해 보는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/45023774/how-to-make-vuex-dry-when-defining-global-accessed-property