Allen's blog Allen's blog
首页
面经
算法 (opens new window)
分类

Allen

前端CV工程师
首页
面经
算法 (opens new window)
分类
  • Javascript

  • TypeScript

  • CSS

  • Vue

    • Vue样式scoped原理以及样式穿透原理
    • inject响应式怎么做
    • Vue状态管理工具Vuex
    • Vue状态管理工具Pinia
    • Vue重用的组件中使用有状态methods(如防抖)有问题
    • vue3 props unknown属性上不存在xxx
    • Vuex中的状态如果是引用类型,没有响应式
    • typescript类型Element转化为HTMLElement
  • React

  • 框架和构建工具

  • 工具库

  • 常见业务场景

  • Bug

  • 项目实战

  • 前端
  • Vue
Allen
2023-02-27

Vuex中的状态如果是引用类型,没有响应式

修改 Vuex 中的 state 必须要在 mutation 中,否则将不能被监听到。

如果在 mutation 中修改的是引用类型,发现 getters 中没有触发改变,这是因为在修改这个 state 的时候,没有改变引用类型的地址,解决方法是对其进行浅拷贝 or 深拷贝后重新赋值。

export const state = () => {
    student: {
    }
}

export const mutations = {
    setStudent(state, { key, value }) {
        state.student[key] = value
        state.student = { ...state.student } //必须要赋值才能被监听到变化
    }
}

export const getters = {
    copyStudent(state) {
        return state.student
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
上次更新: 2023/12/16, 09:22:46
vue3 props unknown属性上不存在xxx
typescript类型Element转化为HTMLElement

← vue3 props unknown属性上不存在xxx typescript类型Element转化为HTMLElement→

最近更新
01
rollup使用配置文件rollup.config.ts打包
12-08
02
package.json导出类型
12-08
03
关键问题方案
11-17
更多文章>
Theme by Vdoing | Copyright © 2023-2023 Allen | Github
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式