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

Question

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

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

正在检索数据

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 而不是直接访问状态。

de-facto的做法是使用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 or mapGetters 从存储中获取数据。这是一种方式，因此您可以在最终提交的组件中发送操作表单。提交是修改存储状态的唯一方法。存储状态更改后，您的组件将立即使用状态中的最新数据对其更改作出反应。

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

1 - 创建一个 getter.

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

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

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

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

How to get data from vuex state into local data for manipulation

vue.js

vuejs2

vue-component

vuex