계산된 Ajax가 있는 Vuex 작업이 업데이트되지 않음

계산된 Ajax가 있는 Vuex 작업이 업데이트되지 않음

Vue를 Vuex와 함께 사용합니다.프레젠테이션 값을 얻기 위해 Ajax를 사용하는 경우가 있습니다.가는 길 어딘가에서, 아마도computed더 이상 반응하지 않아요

내 컴포넌트:

props: [ 'x', 'y' ],
template: `
  <div class="presentation">
    {{ presentation }}
  </div>
`,
computed: {
  presentation() {
    return this.$store.getters.presentation({ x: this.x, y: this.y });
  }
}

Vuex 스토어:

const store = new Vuex.Store({
  state: {
    table: {
      data: []
    }
  },
...

Vuex 작업:

저는 url에 ajax를 호출하여 약속을 반환합니다.나도 돌연변이를 저질렀어

actions: {
  save: (context) => {
    let uri = 'some/uri';
    let params = {};
    let value = 'A value';

    return axios
    .post(uri, params)
    .then((response) => {
      context.commit('setPresentation', value);
    })
    .catch((error) => {
      console.log('error');
    })
    .finally(() => {});
  },
},

Vuex 돌연변이:

mutations: {
  setPresentation: (state, value) => {
    let pos = state.table.pos;
    state.table.data[pos.y][pos.x].presentation = value;
  },
}

Vuex 게터:

getters: {
  presentation: (state) => (pos) => {
    return state.table.data[pos.y][pos.x].presentation;
  }
},

다음 사항을 이미 확인했습니다.

• 셋업했습니다.table.data디폴트값으로 설정하여 무효로 하다
• getter를 사용하여 데이터 가져오기
• Ajax 콜에 대한 액션 사용
• 액션에서 커밋을 사용하여 변환 호출

주의:

• Ajax 콜은 생성되지 않고 액션에 있어야 합니다.presentation둘 이상의 컴포넌트로부터.
• 외부 Vue 플러그인이 필요 없는 솔루션을 선호합니다.

질문

• 내가 뭘 놓쳤지?
• 어떻게 하면 가장 좋은 방법으로 해결할 수 있을까요?

를 사용해야 합니다.Vue.set대신state.table.data[pos.y][pos.x].presentation = value;

상세한 것에 대하여는, https://vuejs.org/v2/guide/list.html#Caveats 를 참조해 주세요.

다음 코드를 사용하여 변환을 업데이트해 보십시오.

if (!state.table.data[pos.y]) {
  Vue.set(state.table.data, pos.y, [])
}
Vue.set(state.table.data[pos.y], pos.x, { presentation: value })

한마디 OP (오리지널 포스터) :

첫 번째 실패 이유는 마지막 부분만 설정했기 때문이다.{ presentation: value }와 함께Vue.set이미 한 것처럼pos.y그리고.pos.x다른 Ajax 콜을 설정합니다.

Vue가 아직 설정되지 않은 모든 것을 설정하기 위해 필요한 변경인지 아닌지를 완전히 인식하기 위해Vue.set그래서 나는 쓸 필요가 있었다.Vue.set세팅하다pos.y그리고.pos.x뿐만 아니라.

또, 이하의 훌륭한 회답도 참조해 주세요.

인덱스로 항목을 직접 설정할 때 Vue가 어레이의 변경을 감지할 수 없음

네 돌연변이는 괜찮아 문제없어Vue는 에 대한 할당을 검출합니다.presentationVue에 의해 관찰되는 한 개체의 속성은 정상입니다.

대부분의 경우 Vue는 개체를 자동으로 관찰하지만 특히 어레이에서 주의해야 할 몇 가지 문제가 있습니다.

인덱스(docs)를 사용하여 항목을 직접 설정할 때 Vue가 어레이의 변경 사항을 감지할 수 없습니다.

다음과 같은 방법으로 어레이를 채우고 있을 것입니다.

for (let y = 0; y < Y_MAX; y++) {
  // This is bad! Vue cannot detect this change
  state.table.data[y] = []

  for (let x = 0; x < X_MAX; x++) {
    // Same as above, Vue cannot detect this change. As a consequence,
    // the object you are assigning to the array will not be observed
    // by Vue! So if you were to mutate the presentation property
    // of this object, Vue won't know about it.
    state.table.data[y][x] = { presentation: '...' }
  }
}

따라서 문제를 해결하려면 다음과 같은 방법으로 어레이를 변환하지 않아야 합니다.

array[index] = whatever

대신 다음을 수행해야 합니다.

Vue.set(array, index, whatever)

또는 어레이를 먼저 빌드한 후 다음 에 할당할 수 있습니다.state.table.data 마지막. Vue는 할당을 검출한 후 어레이와 어레이에 포함된 모든 것을 재귀적으로 관찰합니다.

const data = []

for (let y = 0; y < Y_MAX; y++) {
  data[y] = []

  for (let x = 0; x < X_MAX; x++) {
    data[y][x] = { presentation: '...' }
  }
}

// After this assignment, data (and all objects contained within it)
// will be observable
state.table.data = data

소품들이 배열된 것 같네요.이.x와 this.y가 프레젠테이션 방식 내에서 올바른 값을 반환해도 되겠습니까?

언급URL : https://stackoverflow.com/questions/57424474/vuex-action-with-ajax-not-updated-in-computed