数据不渲染问题
由于vue生命周期的原因, 如果在一个页面中使用组件,这个组件也刚好用到vuex中的数据,此时如果修改vuex中state中的值,界面是不会重新渲染的。
除非页面刷新重新加载,组件生命周期重新开始,才能拿到最新的值;
上代码:
data() {
return {
tableData: this.$store.state.name
};
}
如果通过:
this.$store.commit('CHANGE_NAME',{name})
这种方式改变state中的值是不会重新渲染的。
解决方式:
1.直接在模板中写this.$store.state.name;
2.通过mapstate的方式引入。
import {
mapState
} from 'vuex';
computed: {
...mapState({
tabList: 'tabList',
})
}
vuex进行模块化开发的时候,怎么获取state
相当于声明了一个变量name,然后以state入参取得其modules文件夹中user文件里的name属性。因为在模块(如user)中,在抛出时的export default中添加了一句:namespaced:true,这很好的使模块域互相分离,并以文件名作为前缀才可获取其中内容。
<template>
<div class="container">
</div>
</template>
<script>
import {mapState} from "vuex"
export default {
computed:{
...mapState({
'name':state=>state.user.name
})
},
data(){
return{
}
},
mounted(){
console.log(this.name)
}
}
</script>