Vuex 스토어가 이미 생성된 후 수동으로 Getter/mutation을 추가하는 방법

Vuex 스토어가 이미 생성된 후 수동으로 Getter/mutation을 추가하는 방법

Vuejs 컴포넌트 중 하나의 '작성' 라이프 사이클 훅에 새로운 변수, 게터 및 돌연변이를 추가하려고 합니다.변수는 정상적으로 동작합니다.그러나 getters/metations에서는 vuex 스토어 오브젝트에 새로운 기능을 추가하는 것만큼 쉬운 일이 아닌 것 같습니다.제가 해결하려는 문제는 재사용 가능한 "공유" 구성 요소를 만드는 것입니다.

컴포넌트는 다음과 같습니다.

<template>
  <div>
    <h2 class="headline">Number of items:</h2>
    <v-select
      :items="limits"
      item-value="value"
      item-text="text"
      label="Select"
      v-model="selected_limit"/>
  </div>
</template>

<script>
  import {selectLimitComponentVariables} from './index';
  import {selectLimitComponentGetters} from './getters';
  import {selectLimitComponentMutations} from './mutations';

  export default {
    created: function () {
      // Add the variables
      Object.assign(this.$store.state[this.ns], selectLimitComponentVariables(this.var_prefix));
      // Add the getters
      Object.assign(this.$store.getters, selectLimitComponentGetters(this.ns, this.var_prefix));
      // Add the mutations
      Object.assign(this.$store._mutations, selectLimitComponentMutations(this.ns, this.var_prefix));
    },
    name: 'SelectLimitComponent',
    props: {
      ns: {
        type: String,
        default: null
      },
      var_prefix: {
        type: String,
        default: ''
      }
    },
    computed: {
      selected_limit: {
        get () {
          return this.$store.state[this.ns].selected_limit;
        },
        set (value) {
          this.$store.commit(`${this.ns}/update${this.var_prefix}selected_limit`, value)
        }
      },
      limits: {
        get() {
          return this.$store.state[this.ns].limits;
        }
      }
    }
  }
</script>

Import된 기능은 다음과 같습니다.selectLimitComponentVariables:

export const selectLimitComponentVariables = function (prefix) {
  return {
    [`${prefix}selected_limit`]: '100',
    [`${prefix}limits`]: [
      {'text': '10', 'value': '10'},
      {'text': '50', 'value': '50'},
      {'text': '100', 'value': '100'},
      {'text': '250', 'value': '250'},
      {'text': 'No limit', 'value': '-1'}]}
};

[ Limit Component Getters ]를 선택합니다.

export const selectLimitComponentGetters = function(namespace, prefix){
  return {
    [`${namespace}/${prefix}selected_limit`]: state => state[`${prefix}selected_limit`]
  }
};

selectLimitComponentMutations:

export const selectLimitComponentMutations = function (namespace, prefix){
  return {
    [`${namespace}/update${prefix}selected_limit`]: (state, newLimit) => state[`${prefix}selected_limit`] = newLimit
  }
};

vuex 스토어가 생성된 후 수동으로 새로운 getters/mutation을 추가하거나 등록할 수 있는 방법이 있습니까?

사용하는 것이 좋다store.registerModulevuex 기능: vuex에 새 모듈을 동적으로 추가

this.$store.registerModule(`${this.ns}selected_limit`, {
  state: selectLimitComponentVariables...,
  getters: selectLimitComponentGetters...,
  mutations: selectLimitComponentMutations...,
  namespaced: true
})

다음 사이트에서 공문을 확인할 수 있습니다.Dynamic Module Registrationhttps://vuex.vuejs.org/en/modules.html 섹션

컴포넌트별 Vuex 상태를 설정하려고 하는 것 같습니다.

이렇게 무작위로 Vuex 스키마를 수정하면 상태 분리를 관리하는 것이 매우 어려워집니다(루트 Vuex 상태만 원숭이로 패칭합니다).

또 다른 접근법이 있습니다.개별 Vuex 모듈을 생성하여 에 동적으로 등록할 수 있습니다.beforeCreate컴포넌트 후크

Vue.use(Vuex);

const HomeModule = {
  namespaced: true,
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
};

const ns = 'home';

Vue.component('home', {
  template: '<div><button @click="increment">+</button> {{ count }}</div>',
  beforeCreate() {
    if (!this.$store.state[ns]) {
      this.$store.registerModule(ns, HomeModule);
    }
  },
  computed: Vuex.mapState(ns, ['count']),
  methods: Vuex.mapMutations(ns, ['increment']),
});

new Vue({
  el: '#app',
  store: new Vuex.Store(),  // Empty root store
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.3/vuex.js"></script>

<div id="app">
  <home></home>
</div>

• 사용하였습니다.nsglobal variable은 여기에 있지만 예시와 같이 프로펠러에서 얻을 수 있습니다.
• 모듈을 하드코딩하지 않고 동적으로 구축할 수 있습니다.
• 필요한 경우 컴포넌트가 파괴된 경우에도 모듈의 등록을 해제할 수 있습니다.

인스턴스화 후 가치를 추가할 때의 문제는 이 기능이 사용하지 않으면 반응하지 않는다는 것입니다.set

데이터가 관찰되었을 때 존재하지 않았던 새 속성을 추가하는 경우.ES5의 제한으로 인해 브라우저 간에 일관된 동작을 확보하기 위해 Vue.js는 속성 추가/삭제를 검출할 수 없습니다.항상 반응해야 하는 속성을 사전에 선언하는 것이 가장 좋습니다.런타임에 속성을 추가하거나 삭제해야 하는 경우에는 글로벌 Vue를 사용합니다.set 또는 Vue.delete 메서드를 지정합니다.

대신 이걸 써봐

import Vue from 'vue';

export const selectLimitComponentMutations = function (namespace, prefix){
  return {
    [`${namespace}/update${prefix}selected_limit`]: (state, newLimit) => {
      Vue.$set(state, `${prefix}selected_limit`, newLimit);
    }
  }
};

언급URL : https://stackoverflow.com/questions/50331314/how-to-manually-add-getters-mutations-to-a-vuex-store-after-its-already-create