vue:vuex

如何使用vuex、使用store中的数据、替换store中的数据?
  vuex大家都不陌生,比如我在一个store的state中存储了items为一个空数组,然后在组件中循环数组中的每一个元素并展示出来,然后再通过axios获取到数据之后更新store,这样数组中就有元素了。
  最开始我使用的思路如下所示:

  const state = {
    totalPrice:  0,
    items: [],
   //.... 其他的state
  }

然后通过axois获取items,获取到之后更新:

    .then(function (response) {
      if (response.data.code == 130) {
        items = response.data.data;
        console.log(items);
        store.commit('update', items);
      }

其中的update已经在mutation中定义了,因为我们知道vue中的state只能通过commit这一种方式来替换而不能通过其他方式,如下:

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

最后,我们需要把items挂载到组件下:

    data: function () {
        return {
          name: "CommodityKinds",
       items: this.$store.state.items
        }
      },

说明:因为我已经将store注册到根组件下了,所以我们可以在组件中使用 this.$store.state来访问到state对象。
  但是,这样是有问题的 — 我们会发现,进入有items数据的页面后, 数据并没有被渲染出来,而是等到我们切换页面,再切换回来的时候才能渲染出来。
  而问题就出现在了最后一步!
  我们应该将store中的数据放在computed下而不是放在data下!!!!
  具体解决方法如下:

    import {mapState} from 'vuex'

然后:

  computed: mapState({
    items: state => state.items
  })

这样,当store中的数据改变时, 就会直接改变了,更多例子可以看vuex官方文档,讲的很好。
总结: 一般而言,我们需要将store下的state放在computed中,将组件自身的state,不需要像vuex这样动态的、传递的放在 data 下即可。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值