Question

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

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

这是我的vuex对象，名为globalReports。当我将globalReports与报告相提并论时它不起作用。

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

我想在没有页面重新加载的情况下执行此操作。谢谢。

Answer 1

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

每次globalReports更改，reports都会自动更新，重建将在更新后自动生成。

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

Answer 2

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>

Getters将获取州属性 用于更改状态属性的突变 执行异步代码然后调用突变以更改状态的操作

有关详情，请访问vuex docs

Answer 3

尝试使用{{updateReports}}。在被监视或调用的情况下，计算将不会被执行，只需调用{{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;
        }
  },

Vuejs v-用于在更新vuex对象时重新构建

3 个答案: