问题——-store 改变后组件没有重新渲染

    在业务中, 经常会遇到:
    A组件点击一个事件 -> 改变store state -> 这时需要通知B组件, 让其重新渲染 -> B组件会根据新的store state渲染组件

    组件A: 改变store

    1. // 某vue 组件中
    2. selectRole(role) {
    3.       this.roleName = role.roleName
    4.       //刷新roleID
    5.       this.$store.dispatch('user/changeRole', role.roleId)
    6. }
    8. // store action:
    9. changeRole({ commit }, roleId){
    10.     //把roleId赋值给state.roleId
    11.     commit('SET_CURRENT_ROLE_ID', roleId)
    12.   },

    组件B
    1, 需要监听state: vue 的js部分

    1. computed: {
    2.     ...mapGetters(['RoleId'])
    3.   },
    4.   watch: {
    5.     // 监控store中currentRoleID
    6.     RoleId(value) {
    7.       // 改变量
    8.       this.count++
    9.       console.log('RoleId', value)
    10.     }
    11.   },

    这里每当RoleId改变时, count就会增加一, 作为变动的key值

    vue的template部分

    1. <div :key="count">
    2.       <div>hello world</div>
    3. </div>

    强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。

    这是一个非常简单的解决方案。

    当然，你可能会对其他方式会更感兴趣：

    简单粗暴的方式：重新加载整个页面

    不妥的方式：使用 v-if

    较好的方法：使用Vue的内置forceUpdate方法 (本人尝试未成功)

    最好的方法：在组件上进行 key 更改

    参考文献:
    https://blog.csdn.net/qq449245884/article/details/104057886