조작을 위해 vuex 상태의 데이터를 로컬 데이터로 가져오는 방법

조작을 위해 vuex 상태의 데이터를 로컬 데이터로 가져오는 방법

나는 vuex 상태에서 나의 지역 상태와 어떻게 상호작용하는지를 이해하는 데 어려움을 겪고 있다.나는 vuex 상태로 저장된 여러 항목이 포함된 어레이를 가지고 있다.내 vuex 상태에서 구성 요소 로컬 상태로 데이터를 가져오려고 해.나는 게터 및 계산된 속성으로 데이터를 가져오는 데 문제가 없지만 계산된 속성의 동일한 데이터를 로컬 상태로 가져와 조작할 수는 없다.나의 최종 목표는 이 부품에 페이지 매김을 만드는 것이다.

나는 게이터와 계산된 속성을 사용하여 데이터를 얻을 수 있다.어디선가 라이프사이클 훅을 사용해야 할 것 같아.

데이터 검색 중

App.vue:

구성 요소가 로드되기 전에 데이터를 빼내려는 겁니다.이는 구성요소 자체에 라이프사이클 후크를 생성하는 것과 비교해서 아무런 효과가 없는 것으로 보인다.

export default {
  name: "App",
  components: {},
  data() {
    return {
      //
    };
  },
  mounted() {
    this.$store.dispatch("retrieveSnippets");
  }
};

상태:

이것은 모듈이다.store/modules/snippets.js

const state = {
   snippets: []
}

const mutations = {
SET_SNIPPETS(state, payload) {
    state.snippets = payload;
  },
}

const actions = {
retrieveSnippets(context) {
    const userId = firebase.auth().currentUser.uid;
    db.collection("projects")
      .where("person", "==", userId)
      .orderBy("title", "desc")
      .onSnapshot(snap => {
        let tempSnippets = [];
        snap.forEach(doc => {
          tempSnippets.push({
            id: doc.id,
            title: doc.data().title,
            description: doc.data().description,
            code: doc.data().code,
            person: doc.data().person
          });
        });
        context.commit("SET_SNIPPETS", tempSnippets);
      });
  }
}

const getters = {
  getCurrentSnippet(state) {
    return state.snippet;
},

내부 구성요소

data() {
    return {
      visibleSnippets: [],
   }
}
computed: {
stateSnippets() {
      return this.$store.getters.allSnippets;
    }
}

HTML:

계산된 속성이 바인딩되어 있기 때문에 html에서 stateSnappets에 의해 반환되는 배열을 루핑하고 있음을 알 수 있다.이것을 제거하고 내 지역 상태를 반복하려고 하면 계산된 속성이 더 이상 작동하지 않는다.

<v-flex xs4 md4 lg4>
  <v-card v-for="snippet in stateSnippets" :key="snippet.id">
    <v-card-title v-on:click="snippetDetail(snippet)">{{ snippet.title }}</v-card-title>
  </v-card>
</v-flex>

내 목표는 반환되는 어레이를 가져오는 것이다.stateSnippets의 로컬 데이터 속성으로visibleSnippets이렇게 하면 페이지 매김을 만들 수 있고 이 잠재적으로 매우 긴 배열을 더 짧은 배열을 조작할 수 있다.

당신은 여러 가지 방법으로 국가를 당신의 템플릿에 넣을 수 있고, 모든 것이 반응할 것이다.

템플릿에 직접 삽입

<div>{{$store.state.myValue}}</div>
<div v-html='$store.state.myValue'></div>

계산 사용

<div>{{myValue}}</div>

computed: {
  myValue() { return this.$store.state.myValue }
}

Vuex mapState 도우미 사용

<div>{{myValue}}</div>

computed: {
  ...mapState(['myValue'])
}

사용할 수도 있다.getters주(州)에 직접 접근하는 대신

실제적인 접근방식은 mapGetters와 mapState를 사용한 다음 로컬 구성요소를 사용하여 Vuex 데이터에 액세스하는 것이다.

컴포지션 API 사용

<div>{{myValue}}</div>

setup() {
 // You can also get state directly instead of relying on instance.
 const currentInstance = getCurrentInstance()
 const myValue = computed(()=>{
   // Access state directly or use getter
   return currentInstance.proxy.$store.state.myValue
 }) 
 return {
  myValue
 }
}

플럭스/Vuex의 작동 방식을 완전히 잘못 이해하고 있는 것 같아.플럭스와 그것의 Vuex에서의 구현은 하나의 흐름이다.따라서 구성 요소는 mapState 또는 mapGetters를 통해 저장소에서 데이터를 얻으십시오.이것은 하나의 방법이기 때문에 당신은 결국 커밋된 구성요소 내에서 행동 양식을 발송한다.스토어 상태를 수정할 수 있는 유일한 방법은 커밋이다.저장 상태가 변경된 후, 구성 요소는 해당 상태의 최신 데이터로 즉시 변경에 반응한다.

참고: 처음 5개 요소만 원하는 경우 저장소에서 데이터를 잘라내십시오.다음과 같은 두 가지 방법으로 할 수 있다.

1 - 게이터를 만드십시오.

getters: {
    firstFiveSnipets: state => {
        return state.snipets.slice(0, 5);
    }
}

2 - mapState에서 계산된 속성 생성

computed: {
    ...mapState(['allSnipets']),
    firstFiveSnipets() {
        return this.allSnipets.slice(0, 5);
    }
}

참조URL: https://stackoverflow.com/questions/57095625/how-to-get-data-from-vuex-state-into-local-data-for-manipulation