Vuejs v-for在更新vuex对象时重新构建答案

【问题标题】：Vuejs v-for re-build when update vuex objectVuejs v-for在更新vuex对象时重新构建
【发布时间】：2018-04-03 06:08:49
【问题描述】：

我是 vuejs 新手，我想在更新 vuex 对象后重新构建我的 v-for 循环。请参阅以下示例代码。

<div class="row search-result-row" v-for="report in reports" :key="report">
   <p>{{ report.description }}</p>
</div>

这是我的名为 globalReports 的 vuex 对象。当我将 globalReports 等同于报告时，它不起作用。

computed: {
    updateReports: function() {
        return  this.reports = this.$store.state.globalReports;
    }
},

如何在不重新加载页面的情况下做到这一点？

【问题讨论】：

不清楚为什么updateReports 是一个计算属性。不应该在methods吗？可能是updateReports 从未在 DOM 中引用，因此从不“计算”本身并且不执行。 VueJS 是响应式的，因此每当 this.reports 更新时，你的 DOM 就会更新。

标签： html vue.js vuejs2

【解决方案1】：

试试{{updateReports}}。 Computed在被监控或调用时不会被执行，只是调用{{updateReports}}

<div class="row search-result-row" v-for="report in reports" :key="report">
   <p>{{ report.description }}</p>
</div>
{{updateReports}}

并且不返回任何内容，只需更新/分配 this.reports 的值

computed: {
    updateReports: function() {
        this.reports = this.$store.state.globalReports;
    }
},

【讨论】：

计算属性就像 getter 一样。它们通过这个 getter 转换为 vue 的普通属性，因此最好返回一个值而不是分配给数据属性，并且可以像普通数据属性一样在模板中使用。所以updateReports 可以只返回状态globalReports 并用作v-for="report in updateReports"

【解决方案2】：

通过使用mapState，您可以将globalReports的值自动映射到reports。

每次globalReports 更改，reports 都会自动更新，更新时会自动进行重建。

<script>
import { mapState } from "vuex";
export default {
  computed: mapState({
    reports: "globalReports"
  })
};
</script>

【讨论】：

【解决方案3】：

Vuex 是响应式的，因此当您更新状态时，此更改将影响您使用状态属性的所有组件。更具体地说：

我给你举个例子：

    //VUEX STORE
state: {
    property1
},
getters: {
    getProperty1(state) {
        return state.property1
    }
},
mutations: {
    setProperty1(state, payload) {
        state.property1 = payload
    }
},
actions: {
    changeProperty1({commit}, payload) {
        commit('setProperty1', payload)
    }
}

下面是你与状态交互的组件

<template>
    <p>this is from state of store {{ getProperty1 }</p>
    <input type="text" v-model="value"> 
    <button @click="changeState">Sumbit</button>
</template>
<script>
    export default {
        data() {
            return {
                value: ''
            }
        },
        computed: {
            getProperty1() {
                return this.$store.getters.getProperty1
            }
        },
        methods: {
            changeState() {
                this.$store.dispatch('changeProperty1', this.value)
            }
        }
    }
</script>

Getter 用于获取状态属性 改变状态属性的突变 执行异步代码然后调用突变来改变状态的动作

更多信息请访问vuex docs

【讨论】：