템플릿에서 직접 vuex 상태 사용/수정

템플릿에서 직접 vuex 상태 사용/수정

vue + vuex의 작업에 대한 오해를 하고 있는 것 같습니다.

다음과 같은 시나리오가 있습니다.

목록에 대한 필터가 포함된 vuex 상태입니다.의 각 필터 항목을 선택한 것으로 표시할 수 있습니다.단, 다른 컴포넌트가 변경에 반응할 수 있도록 vuex 상태는 적용 버튼을 클릭했을 때 한정자를 통해서만 수정해야 합니다.예를 들어 선택한 필터에 따라 목록이 데이터를 다시 로드합니다.상태가 갱신되면 컴포넌트를 갱신해야 합니다.

펜을 만들었습니다.

https://codepen.io/anon/pen/OzEJWP?editors=1010

https://jsfiddle.net/rxqu7ame/

Vue.component('filter-item', {
template: ` <div>
            <!--{{item.color}} ({{item.selected}}) <button @click="item.selected = !item.selected">toggle</button>-->
            {{item.color}} ({{isSelected}}) <button @click="isSelected = !isSelected">toggle</button>
          </div>`,
data: function () {
return {
  isSelected: this.item.selected
}
},
computed: {
/*isSelected : function(){
  return this.item.selected;
}*/
},

props: ['item']
});   

나는 여러 가지 문제에 부딪쳤다.

1. "filter-item" 템플릿 내에서 직접 "selected" 속성을 전환하면 vuex 상태도 업데이트됩니다.
2. 그래서 데이터 속성을 주정부와 함께 초기화하려고 했습니다.이제 "is Selected" 데이터 변수만 업데이트됩니다.'적용' 버튼을 누르면 vuex 상태가 갱신됩니다(나중에 변환을 사용합니다).지금까지는 양호합니다.는 국가가 변했다 하지만 지금,'‚isSelected 속성 자동으로 업데이트되지 않을 것이다.
3. 그 확인을 행사에 만약 내가computed 속성을 사용하여 „isSelected" 수 없는 변화이다.

올바른 방법은 어떤 지정된 시나리오 archieve는 것이다?

감사합니다!

업데이트 codepen:https://codepen.io/guanzo/pen/xpzrMm?editors=0010

나는 상황에 전에도 쉬운 다음"실제"변수에 가게에서"임시"변수를 추가하다는 것을 발견했다 차에 치였어요.그"실제"변수는selected,"임시"변수이고요.tempSelected".tempSelected사용자가 색을 켰다 껐다 한다, 업데이트할 것이다.selected언제"저장하는 데 적용되"업데이트될 것이다.

여기는 기본 저장소 상태의 모습입니다.

filter: [
      {
        color: 'red',
        selected: false,
        tempSelected: false,
      },
      {
        color: 'green',
        selected: false,
        tempSelected: false,
      }      
    ]

이것은 돌연변이를 거쳐 단일 색을 토글 하려면요.직접 참조를 통해 항상 돌연변이를 통해 하는 저장소를 업데이트하지 말아야 한다.만약 여러분이 계산된get/set 구문에 대해 혼란스러워, 여기:https://vuejs.org/v2/guide/computed.html#Computed-Setter. 보여

Vue.component('filter-item', {
  template: ` <div>
                {{item.color}} ({{item.tempSelected}}) 
<button @click="isSelected = !isSelected">toggle</button>
              </div>`,
  computed: {
     isSelected:{
       get(){
         var filter = this.$store.state.filter.find(filter=>filter.color === this.item.color)
         return filter.tempSelected
       },
       set(value){
         this.$store.commit('updateSelected',{
           color: this.item.color,
           selected: value
         })
       }
     }
  },

여기 가게 돌연변이 단일 색을 업데이트할 수 있습니다.

updateSelected(state,payload){
  var filter = state.filter.find(filter=>filter.color===payload.color)
  filter.tempSelected = payload.selected
}

지금 당신은 온도 변수는 사용자 입력을 저장하고 있다."저장하는 데 적용되"려면, 그냥, 온도 변수의 값의 실제 변수의 값을 설정할 필요가 있다.

updateFilters(state){
      state.updates++;
      state.filter.forEach(filter=>{
          filter.selected = filter.tempSelected
      })
    },

의 값을 .selected 단, 이 가지고 있어야 .tempSelected변수 동기화 중

toggleFilters(state){
      state.updates++;
      state.filter.forEach(filter=>{
          filter.selected = !filter.selected
          filter.tempSelected = filter.selected
      })
    },

이제 "변경 취소" 기능을 구현하는 것이 간단해졌습니다. , 「」를 할 수 있습니다.tempSelectedselected마지막으로 알려진 값으로 상태를 효과적으로 복원합니다.

1) 예를 들어 계산된 속성을 이 속성의 필터 항목 및 워처에 추가할 수 있습니다.따라서 filter-item 컴포넌트는 vuex가 변경되었는지 여부를 인식하고 change is Selected 속성:

data: function () {
  return {
    isSelected: this.$store.state.filter[this.index].selected
  }
},
computed: {
  storeSelected: function(){
    return this.$store.state.filter[this.index].selected;
  },
  color: function(){
    return this.$store.state.filter[this.index].color;
  }
},
watch: {
  storeSelected: function(){
    this.isSelected = this.$store.state.filter[this.index].selected;
  }
},
props: ['index']

코드펜 : https://codepen.io/aircrisp/pen/MrXEgd?editors=0010

2)

Vuex 스토어에서 실제로 상태를 변경하는 유일한 방법은 변환을 커밋하는 것입니다.https://vuex.vuejs.org/en/mutations.html

따라서 변환을 사용하여 vuex 상태를 변경하는 경우 예를 들어 구성 요소가 마운트된 후 필터 항목 구성 요소의 변환을 구독할 수 있습니다.

mounted: function(){
  this.$store.subscribe((mutation, state) => {
     if(mutation === 'changeFilterItem'){
       this.isSelected = state.filter[this.index].selected;
     }
  })
 },

codepen : https://codepen.io/aircrisp/pen/MrXEgd?editors=0010 (코드명)

언급URL : https://stackoverflow.com/questions/48229022/use-modify-vuex-state-directly-in-template