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

Question

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

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

检索数据

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

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

Answer 2

我猜你理解 Flux/Vuex 的工作方式完全错误。 Flux 及其在 Vuex 中的实现是一种方式流。因此，您的组件通过mapState 或mapGetters 从存储中获取数据。这是一种方法，因此您可以在最终提交的组件内分派操作表单。提交是修改存储状态的唯一方法。商店状态发生变化后，您的组件将立即使用状态中的最新数据对其更改做出反应。

注意：如果你只想要前 5 个元素，你只需要从存储中分割数据。您可以通过 2 种不同的方式进行操作：

1 - 创建一个 getter。

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

2 - 从 mapState 创建一个计算属性。

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