vue3+ts使用mapState实现数据响应

1. 问题描述：门户上-找工作/揽人才页面，以游客的身份浏览职位信息，投递简历或者收藏职位，提示登录或注册，登录后再次打开应该还是之前的当前页，还保留之前的查询项。现在登录后的操作全部用的“window.location.reload()”页面刷新，有人有好的修改思路吗？要求是能只刷新列表和最顶部的登录状态

​

解决思路，结合现有框架用的vuex的mapState方法，实现数据响应式，只需要改变vuex的数据就实现刷新列表和最顶部的登录状态

（1.）vuex的mutations里增加了 setUserInfo方法，在登录完成后更新了vuex的state数据

    // 更新用户信息
    setUserInfo(state,userInfo){
      state.userInfo = userInfo
    },

    store.commit('setUserInfo', userInfo)

(2.)封装了一个监听方法，引用hook.js

hook.js文件

import { computed } from 'vue'
import { mapState, useStore } from 'vuex'
// mapper是存在state中的数据
export function useState(mapper) {
  const store = useStore()

  const storeStateFns = mapState(mapper)

  console.log(storeStateFns)
  let storeState = {}
  Object.keys(storeStateFns).forEach(fnKey => {
    const fn = storeStateFns[fnKey].bind({ $store: store })
    storeState[fnKey] = computed(fn)
  })

  return storeState
}

（3.）页面使用

关键****

引入useState 方法

import { useState } from '@/store/hook'

 const mapper = useState({
  userInfo: (state: any) => state.userInfo
})
 // 取值
 console.log(mapper.userInfo.value)