vue.js - 如何将数据从 vuex 状态获取到本地数据进行操作

Question

我无法理解如何从我的 vuex 状态与我的本地状态进行交互。我有一个数组，里面有多个项目，存储在 vuex 状态。我正在尝试将数据从我的 vuex 状态获取到我的组件本地状态。我使用 getter 和计算属性获取数据没有问题，但我无法将计算属性中的相同数据获取到本地状态以对其进行操作。我的最终目标是在这个组件上建立分页。
我可以使用 getter 和计算属性获取数据。我觉得我应该在某个地方使用生命周期 Hook 。
检索数据
应用程序.vue:
我试图在加载任何组件之前提取数据。与在组件本身上创建生命周期 Hook 相比，这似乎没有任何影响。

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 中 stateSnippets 返回的数组，因为计算的属性已绑定(bind)。如果我删除它并尝试遍历我的本地状态，则计算的属性不再起作用。

<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 的本地数据属性.这将允许我建立分页并将这个可能很长的数组操作成更短的数组。

Answer 1

您可以通过多种方式将状态添加到您的模板中，所有方式都将是 无功 .
直接在模板中

<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
 }
}