Vuex 변경은 모듈에 영향을 주지 않음

Vuex 변경은 모듈에 영향을 주지 않음

나는 가지고 있다UserDialogVuex 상태 트리의 일부를 활용하여 자신을 표시할지 여부를 결정하는 컴포넌트:

import { Component, Prop, Vue } from 'vue-property-decorator';
import { State, Getter, Mutation, Action, namespace } from 'vuex-class';
import { fk } from 'firemodel';
import { User } from '@/models/User';
const Users = namespace('users');

@Component({})
export default class UserDialog extends Vue {
  @Prop() public id!: fk;
  @Users.State public show: fk;
  @Users.Getter public selectedUser: User;
  @Users.Mutation public HIDE_USER_PROFILE: () => void;

  public get showDialog() {
    return this.show === undefined ? false : true;
  }

}

Vuex의 부모 컴포넌트에서 호출하는commit('SHOW_USER_PROFILE', id)이 ID를 설정하면 UserDialog가 갱신됩니다.show재산이 필요합니다.

Vuex 스토어가 SHOW_USER_PROFILE 호출을 수신하여 상태 트리의 상태를 업데이트한 것을 명확하게 알 수 있습니다(이것은 브라우저의 Vue Developer 플러그인을 통해).그러나 UserProfile 컴포넌트로 전환해도 상태 갱신이 아직 수신되지 않은 것을 알 수 있습니다.

주의: 강조 표시하는 UserID를 설정한 후 페이지(일명 CMD-R)를 새로고침하면 컴포넌트가 새로고침됩니다.사용하고 있기 때문입니다.veux-persistID는 상태 트리에 계속 설정되어 있습니다.이 시점에서 컴포넌트는 올바른 상태를 수신하지만 정상적인 반응성 시스템에 의존할 경우 작동하지 않습니다.

누구 도와줄 사람?

---

추가 콘텍스트에 대해서는, 다음의 몇개의 모듈을 참조해 주세요.

스토어 정의:

export default new Vuex.Store<IRootState>({
  modules: {
    packages,
    users,
    searchCriteria,
    snackbar
  },
  plugins: [FireModelPlugin, localStorage.plugin]
});

사용자 돌연변이:

const mutations: MutationTree<IUsers> = {
  selectUser(state, id: fk) {
    state.selected = id;
  },
  SHOW_USER_PROFILE(state, id: fk) {
    state.show = id;
  },
  HIDE_USER_PROFILE(state) {
    state.show = undefined;
  }
};

---

계산된 속성을 에 추가했습니다.UserDialog위의 컴포넌트:

public get userId() {
  return this.$store.state.users.show;
}

어쩌면 이게 반응적일지도 모른다는 생각이 들었지만@Users.State장식된show자산은 그렇지 않습니다.안타깝게도 둘 다 정확히 같은 성능을 발휘합니다.

@Derek와 어젯밤에 이야기를 나누었는데, 이 문제의 원인은 현재 리액티브 시스템이 처리하지 않는 "정의되지 않은" 상태로의 이행에 있다는 것을 알았습니다(오브젝트 프록시를 사용하여 Vue-NEXT에 도달하면 문제 없습니다).다음에서 상태 전환을 전환하면 나머지 코드가 제대로 작동합니다.undefined → string → undefined로.null → string → undefined.

시간을 내주셔서 @Derek에게 감사드립니다.

위의 예에서는 Vuex 스테이트 스토어에 직접 문의하고 있습니다.컴포넌트에서 이 작업을 수행하면 한 번뿐인 딜이 됩니다.State Store는 반응하지 않습니다.또한 이 정보를 알리지 않습니다.computed변경된 속성입니다.

원하는 반응성을 얻는 올바른 방법은 Vuex를 구현하는 것입니다.getters:

const store = new Vuex.Store({
  state: {/*...*/},
  getters: {
    show(state) {
      return state.show;
    }
  }
})

다음으로 컴포넌트에서 다음을 수행합니다.

computed: {
  show() {
    return this.$store.getters.show;
  }
}

Vuex 상세보기getters여기: https://vuex.vuejs.org/guide/getters.html

언급URL : https://stackoverflow.com/questions/51239491/vuex-changes-not-impacting-modules