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 下即可。

猜你喜欢