首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vuex -更新整个阵列

Vuex -更新整个阵列
EN

Stack Overflow用户
提问于 2018-06-09 03:21:27
回答 5查看 31.5K关注 0票数 15

我有一个Vue.js应用。此应用程序正在使用Vuex进行状态管理。我的商店看起来是这样的:

代码语言:javascript
复制
const store = new Vuex.Store({
    state: {
        items: []
    },

    mutations: {
        MUTATE_ITEMS: (state, items) => {
            state.items = items;
        }
    },

    actions: {
        loadItems: (context, items) => {
            context.commit('MUTATE_ITEMS', items);
        }
    }
  })
;

在我的Vue实例中,我有以下方法:

代码语言:javascript
复制
loadItems() {

  let items = [];
  for (let I=0; I<10; I++) {
    items.push({ id:(I+1), name: 'Item #' + (I+1) });
  }
  this.$store.dispatch('loadItems', items);
},

当我运行这段代码时,我注意到我的子组件中的项目列表没有更新。我怀疑这是因为Vue.js中的反应性模型。但是,我不确定如何更新整个数组。此外,我不确定是否需要在我的存储变异、存储操作或在Vue实例方法本身中使用Vue.set。我有点困惑。

组件:

代码语言:javascript
复制
<template>
    <div>
        <h1>Items ({{ items.length }})</h1>
        <table>
            <tbody>
                <tr v-for="item in items" :key="item.id">
                    <td>{{ item.id }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        computed: mapState({
            items: state => state.items
        })
    };
</script>

如何在Vue.js应用程序中更新集中存储在Vuex中的整个阵列?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50767191

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档