Question

以下代码是一个非常简单的应用程序。该应用程序将安装，通过ref / endpoint通过（firebase的）value事件接收报价列表，并推送到allQuotes中的home.vue数组。

然后在QuoteList.vue中，仅使用getter的{{1}}来显示此列表。

quoteList

尽管此设置有效，但我无法理解computed: { myAllQuotes() { return this.$store.getters.get_quotesList; } }中的quotesList为什么会自动被突变，即使它在任何情况下都没有被明确地突变（使用store.js（使用商店设置者））使用它的组件。

我怀疑 set_allQuotes中的以下代码段以某种方式更新了home.vue（在商店中），但我无法理解计算属性变异背后的逻辑商店状态。

Home.vue

quoteList

这是完整的代码，

Main.js

computed: {
            allQuotes() {
                return this.$store.getters.get_quotesList;
            }
        },

Store.js

    import Vue from 'vue'
    import App from './App.vue'
    import { store } from './store/store.js'

    new Vue({
      el: '#app',
      store,
      render: h => h(App)
    })

App.vue

    import Vue from 'vue'
    import Vuex from 'vuex'

    Vue.use(Vuex)

    export const store = new Vuex.Store({
        state: {
            quotesList: [],
        },
        getters: {
            get_quotesList(state) {
                return state.quotesList
            }
        },
        mutations: {
             set_allQuotes(state, value) {
                state.quotesList = value
            }
        }
    })

Home.vue

    <template>
        <div class="container">
            <router-view></router-view>
        </div>
    </template>

    <script>
        import home from './home.vue'
        export default {
            components: {
                home
            }
        }
    </script>

QuoteList.vue

    <template>
        <div class="container">
            <quote-list />
        </div>
    </template>

    <script>
        import quoteList from './components/QuoteList.vue'

        export default {
            computed: {
                allQuotes() {
                    return this.$store.getters.get_quotesList;
                }
            },
            components: {
                quoteList
            },
            methods: {
                get_allQuotes: function() {
                    var vm = this;
                    quotesRef.once('value', function(snapshot) {
                        snapshot.forEach(function(snap) {
                            vm.allQuotes.push({
                                key: snap.key,
                                category: snap.val().category,
                                quoteTxt: snap.val().quoteTxt
                            })
                        })
                    })
                }
            },
            mounted() {
                this.get_allQuotes()
            }
        }
    </script>

注意：使用<template> <div class="row"> <div class="col-xs-12 quotes-list-wrapper"> <template v-for="(quote,idx) in myAllQuotes"> <div class="quote-block-item"> <p class="quote-txt"> {{quote.quoteTxt}} </p> </div> </template> </div> </div> </template> <script> export default { computed: { myAllQuotes() { return this.$store.getters.get_quotesList; } } } </script>只是为了简洁而省略了路由器代码（路由和路由器链接）。

谢谢

Answer 1

您正在尝试更新Home.vue文件中的计算属性。代码块是这样：

snapshot.forEach(function(snap) {
                            vm.allQuotes.push({
                                key: snap.key,
                                category: snap.val().category,
                                quoteTxt: snap.val().quoteTxt
                            })
                        })

如果您尝试直接更改计算属性，则vue将在每个刻度上将其替换为您的状态。因此，这不是一个真正的方法。如果要更改状态，则应通过操作和突变来做到这一点。

希望这会有所帮助。

Vuex：为什么状态数组会被突变（可能通过计算属性），即使没有提交/调度也是如此

1 个答案: