돌연변이를 통해 상태 속성을 동적으로 추가하는 방법

돌연변이를 통해 상태 속성을 동적으로 추가하는 방법

에 속성을 추가하려는 경우store.state돌연변이로매우 간단한 예:

// state.js
export default () => ({
    Prop1: '1',
    Prop2: '2'
})

//mutations.js
export default {
    makeProp (state, anotherProp) {
        return state.anotherProp = anotherProp;
    }
}

// State Client
export default () => ({
    Prop1: '1',
    Prop2: '2',
    anotherProp: 'what ever'
})

다 잘 된다.하지만 더 이상 부에 컴포넌트에서는 반응하지 않는 것 같다.만약anotherProp새 값을 가져오면 구성 요소가 값을 렌더링하지 않는다.

정의한 경우anotherProp주(州)에 고정되어 있고, 반응성이 있다.그 이유를 짐작할 수 있다.나는 Vue의 반응성이 그것의 데이터를 알아야 한다고 생각한다. 그래서 Vue는 어떤 변화를 들어야 하는지 알고 있다.

내가 어떻게 할 수 있나요?나는 변이를 통해 국가를 추가해야 한다.배경:

우리는 Databasemanagement를 구현했다.따라서 사용자가 새 데이터베이스를 만들면 vuex 스토어는 이러한 데이터베이스를 동적으로 알아야 한다.그래서 현재 우리는 각 데이터베이스에 대한 상태를 만드는 돌연변이를 가지고 있다.

내가 그 문제를 해결할 방법이 없을까?난 아직도 모르겠어:d

Lewis와 Vuex에 따르면, 상점이 초기화될 때 모든 초기 변형 규칙이 존재해야 할 것 같다.

간단한 해결책은 원하는 모든 속성을 포함하는 초기 속성을 초기화하는 것일 수 있다.예를 들면 다음과 같다.

export default () => ({
  data: {
    Prop1: '1',
    Prop2: '2'
  }
})

이렇게 하면 다음과 같은 이점을 얻을 수 있다.

Vue.set(data, 'anotherProp', 'what ever')

또는

state.data = { ...state.data, 'anotherProp': 'what ever' }

여기 주특성을 창조하기 위한 돌연변이가 있고 나는 이 프로펠러를 Vue에 반응하도록 만드는 것을 통합하려고 노력한다.

업데이트 -------------------------------------------------------------------

// mutation.js
import Vue from 'vue'

export default {
    stateUpdate (state, target) {
      Vue.set(state, target.t, target.data);
    },
}

이게 내가 필요했던 거야 왜냐면 난 그게 필요했거든mutate그리고set구성 요소가 아닌 Vuex Store 자체에서.

당신의 도움 :)

참조URL: https://stackoverflow.com/questions/56794329/how-to-add-state-properties-dynamically-via-mutations