如何使用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 下即可。