关于uniapp微信小程序无法在data和template直接获取vuex中数据的解决办法

本文主要是介绍关于uniapp微信小程序无法在data和template直接获取vuex中数据的解决办法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

先看个案例:

从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>

小程序端显示了数据,并做到了响应式:

这篇关于关于uniapp微信小程序无法在data和template直接获取vuex中数据的解决办法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！