Vuex惊天漏洞!!!破解Vuex状态管理漏洞:让getters变量具有set赋值的能力,支持双向绑定

简介: Vuex惊天漏洞!!!破解Vuex状态管理漏洞:让getters变量具有set赋值的能力,支持双向绑定


破解双向绑定魔咒!

还支持watch实时监听

代码如此简单↓

<template>
    <div>
        <h1>参数1:{{ $store.getters._qiangGe.参数1 }}</h1><br>
        <h1>参数2:{{ $store.getters._qiangGe.参数2 }}</h1><br>
        <h1>参数3:{{ $store.getters._qiangGe.参数3 }}</h1><br>
        <br>
        <el-button type="primary"
            @click="$store.dispatch('_qiangGe', { 参数1: 1, 参数2: 2, 参数3: 3 });">将Vuex自定义变量赋值为对象类型</el-button>
        <br><br>
        <el-input v-model.trim="$store.getters._qiangGe.参数1" placeholder="请输入内容" clearable />
        <br><br>
        <el-input v-model.trim="$store.getters._qiangGe.参数2" placeholder="请输入内容" clearable />
        <br><br>
        <el-input v-model.trim="$store.getters._qiangGe.参数3" placeholder="请输入内容" clearable />
    </div>
</template>    
<script>
export default {
    watch: {
        '$store.getters._qiangGe.参数1': {
            handler(d) {
                console.log('监听参数1:', JSON.stringify(d));
            },
            deep: true, immediate: true,
        },
        '$store.getters._qiangGe.参数2': {
            handler(d) {
                console.log('监听参数2:', JSON.stringify(d));
            },
            deep: true, immediate: true,
        },
        '$store.getters._qiangGe.参数3': {
            handler(d) {
                console.log('监听参数3:', JSON.stringify(d));
            },
            deep: true, immediate: true,
        },
    },
};
</script>


image.png image.png

image.png

相关文章
|
5月前
|
索引
ArrayList集合常用方法,.set可以用来生成图片和赋值命名,array.remove(1),array.set(1,“xxxx”)可以修改指定位置,array.size可以获取元素的个数
ArrayList集合常用方法,.set可以用来生成图片和赋值命名,array.remove(1),array.set(1,“xxxx”)可以修改指定位置,array.size可以获取元素的个数
|
6月前
|
数据库
仅当指定列列表,且SET IDENTITY_INSERT为ON时,才能对自增列赋值
仅当指定列列表,且SET IDENTITY_INSERT为ON时,才能对自增列赋值
764 0
|
前端开发 JavaScript API
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
|
7月前
|
C++ 容器
set容器-构造和赋值讲解
set容器-构造和赋值讲解
67 0
|
SQL 分布式计算 DataWorks
使用`SET`语句来定义变量并为其赋值
使用`SET`语句来定义变量并为其赋值
253 4
|
SQL 分布式计算 DataWorks
可以使用SET语句来定义变量并为其赋值
可以使用SET语句来定义变量并为其赋值
70 2
|
前端开发 API 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(六)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(六)
|
前端开发 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(四)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(四)
|
前端开发 JavaScript 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(三)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(三)
|
前端开发 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(二)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(二)