数据发生变化，但是视图没有变化

数据发生变化，但是视图没有变化

这是存储用户信息的store

import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { LoginResult } from '@/types/member'

// 定义 Store
export const useMemberStore = defineStore(
  'member',
  () => {
    // 会员信息
    const profile = ref<LoginResult>()

    // 保存会员信息，登录时使用
    const setProfile = (val: LoginResult) => {
      profile.value = val
    }

    // 清理会员信息，退出时使用
    const clearProfile = () => {
      profile.value = undefined
    }

    // 记得 return
    return {
      profile,
      setProfile,
      clearProfile,
    }
  },
  // TODO: 持久化
  {
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
      },
    },
  },
)

在页面中引用该store的时候，我为了渲染页面方便

const MemberStore = useMemberStore()
const profile=MemberStore.profile





<view class="overview" v-if="profile?.id">
        <navigator url="/pagesMember/profile/profile" hover-class="none">
          <image class="avatar" mode="aspectFill" :src="profile.avatar"></image>
        </navigator>
        <view class="meta">
          <view class="nickname">
            {{ profile.nickname || profile.account }}
          </view>
          <navigator class="extra" url="/pagesMember/profile/profile" hover-class="none">
            <text class="update">更新头像昵称</text>
          </navigator>
        </view>
      </view>

该代码是错误的，数据不是响应式的，就会造成一种现象：退出登录，用户信息清除了，但是页面的头像，呢称等用户信息没有发生变化

两种方法纠正

方案一：

使用vue的toRefs将数据变为响应式

import { toRefs } from 'vue'
const { profile } = toRefs(useMemberStore())

方案二

老老实实麻烦的渲染

const MemberStore = useMemberStore()





<view class="overview" v-if="MemberStore.profile?.id">
        <navigator url="/pagesMember/profile/profile" hover-class="none">
          <image class="avatar" mode="aspectFill" :src="MemberStore.profile.avatar"></image>
        </navigator>
        <view class="meta">
          <view class="nickname">
            {{ MemberStore.profile.nickname || MemberStore.profile.account }}
          </view>
          <navigator class="extra" url="/pagesMember/profile/profile" hover-class="none">
            <text class="update">更新头像昵称</text>
          </navigator>
        </view>
      </view>

综上：

​ 主要还是使用方法的错误，注意一下就行