如何从vuex状态获取数据到本地数据进行操作

Question

我无法理解如何从我的 vuex 状态与我的本地状态进行交互。我有一个数组，其中包含多个存储在 vuex 状态的项目。我试图将这些数据从我的 vuex 状态获取到我的组件本地状态。我使用 getter 和计算属性获取数据没有问题，但是我无法从计算属性获取相同的数据到本地状态来操作它。我的最终目标是在这个组件上建立分页。

我可以使用 getter 和计算属性获取数据。我觉得我应该在某处使用生命周期钩子。

检索数据

应用程序.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：

您可以看到我正在循环遍历由 stateSnippets 在我的 html 中返回的数组，因为计算属性已绑定。如果我删除它并尝试遍历我的本地状态，则计算属性不再起作用。

<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 数据。