先看个案例:
从vuex中直接对数组进行v-for循环,也就是这句:v-for="item in store.state.showNode"
两个数组长度都为2,预期的样式展示应该是两个1和两个2
网页端:
app模拟器:
微信小程序:
可以看到除了微信小程序,h5和app都获取到vuex中的数据了,同样如果循环data中message的数据,让message:this.$store.state.showNode微信小程序也无法获得vuex中的数据。(这里就不演示了)
在methods方法中让data中的数据获取Vuex中的数据,this.message=this.$store.state.showNode确实可以让message获取到vuex中的数据,但这样就无法做到数据响应式了,只有在赋值的一瞬间才能改变message,如果在写一个watch来监控的话就太麻烦了。
正确的方法是不直接循环或者请求vuex中的数据,也不通过data赋值,通过computed来定义vuex中的值。
uniapp的官网是这样说的:
<template>
<view>
<text>用户名:{{username}}</text>
</view>
</template>
<script>
export default {
data() {
return {}
},
computed: {
username() {
return this.$store.state.username
}
}
}
</script>
试着将刚才的代码改成官网上的样式:
<template>
<view class="content">
<view class="show">
<view class="show_contents">
<view class="show_item" v-for="item in noode">
<view>1</view>
</view>
<view class="show_item" v-for="item in fiile">
<view>2</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
computed:{
noode() {
return this.$store.state.showNode
},
fiile(){
return this.$store.state.showFile
},
}
}
</script>
<style>
</style>
小程序端显示了数据,并做到了响应式: