uni-app 微信小程序vuex在Android端失效

开发环境	版本号	项目创建方式
Windows	3.4.6	HBuilderX

产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.4.6

第三方开发者工具版本号：1.05.2110290

基础库版本号：3.4.6

项目创建方式：HBuilderX

### 示例代码：

```html
<template>
<view>
<view class="my-content">
<view class="header">
<image :src="wechatPicture" style="height: 62px; width: 62px; border-radius: 50%;"></image>
<view v-if="!phone">
<button type="primary" size="mini"  [@click](/user/click)="loginPhoneOpen">登录</button>
</view>
<view v-else class="header-text">
<view class="phone">{{phone}}</view>
<view><text class="company">{{companyName}}</text></view>
</view>
</view>
<view class="my-list">
<view class="my-list-item" [@click](/user/click)="goCompany">
<image src="../../static/image/my-company.png" style="height: 17px; width: 17px;"></image>
<text>企业登录</text>
</view>
<view class="my-list-item" [@click](/user/click)="goAccount">
<image src="../../static/image/my-account.png" style="height: 17px; width: 17px;"></image>
<text>账号管理</text>
</view>
</view>
<view style="padding: 0 30rpx;">
<button :disabled="limit == NO_LIMIT" type="primary"  [@click](/user/click)="loginOut" style="margin-top: 120rpx;">退出登录</button>
</view>
<login-phone ref="loginPhone"></login-phone>
</view>
</view>
</template>

<script>
const StorageHelper = require('../../common/storage-helper')
const Constants = require('../../common/constants');
const UserConstant = Constants.UserConstant;
const ValueConstant = Constants.ValueConstant
const AccountRestful = require('../../restfuls/account');
const UserRestful = require('../../restfuls/user');
import {mapState,mapGetters} from 'vuex'
export default {
data() {
return {
NO_LIMIT: ValueConstant.NO_LIMIT
}
},
created(){
},
computed:{  
    ...mapState(['limit']),  
    ...mapGetters(['phone','companyName', 'wechatPicture']),  
},
watch:{  
    companyName(val){  
        console.log(val)  
    }  
},
methods: {  
    loginPhoneOpen(){  
        this.$refs.loginPhone.$refs.popup.open()  
    },  
    loginOut(){  
        uni.showModal({  
            title: '',  
            content: '确认退出登录？',  
            success: function(res){  
                if(res.confirm){  
                    AccountRestful.logout().then(res => {  
                        getApp().getUserInfo()  
                    })  
                }  
            }  
        })  

    },  
    goCompany(){  
        if(this.phone){  
            uni.navigateTo({  
                url: '/pages/company-login/company-login'  
            })  
        }else{  
            uni.showToast({  
                title: `请先绑定手机号码`,  
                icon: 'none'  
            })  
        }  
    },  
    goAccount(){  
        if(this.phone){  
            uni.navigateTo({  
                url: '/pages/account-manage/account-manage'  
            })  
        }else{  
            uni.showToast({  
                title: `请先绑定手机号码`,  
                icon: 'none'  
            })  
        }  
    }  

}
</script>

.my-content{
background-color: #fff;
padding-bottom: 120rpx;
}
.header{
padding: 50rpx 30rpx;
display: flex;
align-items: center;
image{
margin-right: 20px;
}
.header-text{
font-size: 17px;
font-weight: 500;
color: #000000;
.phone{
margin-bottom: 6px;
}
.company{
background: #000000;
border-radius: 5px;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
padding: 5px;
margin-right: 18px;
line-height: 1;
}
}
}
.my-list{
.my-list-item{
display: flex;
align-items: center;
padding: 20rpx 30rpx;
&:active{
background-color: #f1f1f1;
}
image{
height: 17px;
width: 17px;
margin-right: 40rpx;
}
}
}

.my-list{
.uni-list--sm{
height: 17px;
width: 17px;
}
}

操作步骤：

登入时不会显示手机号，退出时不会清空手机号

预期结果：

正常显示

实际结果：

登入时不会显示手机号，退出时不会清空手机号

bug描述：

微信小程序在安卓机上手机号登入后页面不回显手机号，在ios上不会出现此问题

nodeper 1楼•1 个月前

在 uni-app 开发微信小程序时，如果 Vuex 在 Android 端失效，可能是由于以下几个原因导致的。以下是一些常见的排查和解决方法：

1. Vuex 初始化问题

确保 Vuex 在 main.js 或 App.vue 中正确初始化。例如：

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

const app = new Vue({
  store,
  ...App
})
app.$mount()

2. 异步数据问题

如果 Vuex 中的数据是通过异步请求获取的，确保在页面加载时数据已经正确获取并存储到 Vuex 中。可以使用 computed 属性或 watch 监听 Vuex 数据的变化。

computed: {
  userInfo() {
    return this.$store.state.userInfo
  }
}

3. Android 端兼容性问题

微信小程序在 Android 端可能存在一些兼容性问题，尤其是低版本 Android 系统或某些机型。可以尝试以下方法：

更新微信客户端：确保用户使用的微信客户端是最新版本。
检查 Vuex 版本：确保 Vuex 版本与 uni-app 兼容。
使用 uni.setStorageSync 作为临时解决方案：如果 Vuex 失效，可以将数据存储到本地缓存中。

// 存储数据
uni.setStorageSync('key', value)

// 获取数据
const value = uni.getStorageSync('key')

4. 页面生命周期问题

在微信小程序中，页面生命周期可能与 Vue 生命周期不完全一致。确保在 onLoad 或 onShow 生命周期中正确获取 Vuex 数据。

onShow() {
  this.userInfo = this.$store.state.userInfo
}

5. 调试工具

使用微信开发者工具的调试功能，检查 Vuex 的状态是否正确更新。可以通过以下步骤：

打开微信开发者工具。
在控制台中输入 getApp().$store.state，查看 Vuex 的当前状态。
检查是否有错误日志或警告信息。

6. uni-app 版本问题

确保 uni-app 是最新版本，旧版本可能存在一些已知的兼容性问题。可以通过以下命令更新 uni-app：

npm update @dcloudio/uni-app

7. Vuex 模块化问题

如果使用了 Vuex 模块化，确保模块正确注册并引入。

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  }
})

export default store