computed与watch监听同一对象的场景

 

今日项目需要一个详细的权限配置，如：路由权限，页面tabs权限，操作权限；而路由权限大都知道就不赘述，而操作权限这就涉及页面中每个按钮了，这里使用VUEX进行管理

1.配置store

store 中 user.js 配置如下

const mutations = {
    SET_PERMISS_ARR: (state, permiss) => {
        state.permissArr = permiss
    }
}
const actions = {
  // 获取权限
  getauthList({ commit }) {
    return new Promise((resolve, reject) => {
      getauthList()
        .then(response => {
          // eslint-disable-next-line eqeqeq
          if (response && response.data.code == 0) {
            const dataInfo = response.data
            if (dataInfo.data && dataInfo.data.length > 0) {
              const resFormatArr = formatDataPermiss(dataInfo.data)
              commit('SET_PERMISS_ARR', resFormatArr)
            }
            resolve(dataInfo)
          }
        })
        .catch(error => {
          reject(error)
        })
    })
  },
}
function formatDataPermiss(data, lastSpace = '') {
  const resArrs = []
  data.forEach(item => {
    if (item.childs && item.childs.length > 0) {
      const eachItem = formatDataPermiss(item.childs, lastSpace + '/' + item.space)
      resArrs.push.apply(resArrs, eachItem)
    } else {
      if (item.functions && item.functions.length > 0) {
        item.functions.forEach(childItem => {
          const joinStr = `${lastSpace}/${item.space}/${childItem.action}`
          resArrs.push(joinStr)
        })
      } else {
        resArrs.push(lastSpace + '/' + item.space,)
      }
    }
  })
  return resArrs
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

 

getters.js 配置如下

const getters = {
  getGermissArr: state => state.user.permissArr
}
export default getters

 

其中getauthList()在获取到权限列表后，使用getGermissArr进行存储

页面通过v-if = "getGermissArr.includes('/people/peopleBasic/info')"进行按钮隐藏与显示

（getGermissArr值为['/people/peopleBasic/edit','/people/peopleBasic/info', ...]

在页面具体操作中传入对应值进行匹配，如果存在及判定该用户拥有该操作权限）

然而这一切并未像预料的那么顺利，如下

2. 运行测试

测试截图

测试中发现，如管理员登录菜单是编辑，查看，在此给另一个用户配置权限只有编辑这个操作，然后

管理员退出，再使用刚配置的用户进行登录，发现数据操作都有，显然这数据没有更新还是是上一次

管理员的操作权限的缓存然而我在每次登录的时候都调用过对应的权限方法，debugger时也确实重新

赋值了，也调用了该mutantion的 SET_PERMISS_ARR

3. 修改mutations

根据上面测试，推断是不是state.permissArr = permiss重新为getGermissArr赋值操作未成功

于是改为 set将其重新指定属性值

这个是可以解决在用户首次登录后数据更新正确，但是在页面再次刷新后，computed 中的 getGermissArr却始终为空数组？？？

后来在页面增加watch 对getGermissArr进行监听，如下：

控制台查看computed 与watch 对 getGermissArr 监听后log打印

看上图

第一行是getUserPermission()方法中打印的this.getGermissArr

第二行是watch 中打印的

显然getUserPermission()方法比 watch 先执行why?

个人认为 这里就是`computed`与`watch`的本质区别，`computed`监听的是这个响应式对象的变法，而

`watch`是监听这个对象的值的变化

在`  VUE.set(state, 'permissArr', permiss)`的时候`computed`监测到`permissArr`有变化，

他立马响应到了`getUserPermission()`这个操作中的`this.getGermissArr`,  而这个点`set`刚把

`permissArr`清空尚未将新值赋值过去，所以页面得到的`getGermissArr`还是一个`[]`


而watch监测到`permissArr`被赋值了新值才真正相应`getGermissArr`

所以对应这个场景 `computed`适用于第一次登陆对应`permissArr`对象更新的监听，`watch `适用于监

听页面刷新`permissArr`再次赋值

好啦个人能力有限以上记录纯属个人理解推测，不准确处望评论指点谢谢