Vue的observable用法

最新推荐文章于 2024-03-26 16:20:46 发布
最新推荐文章于 2024-03-26 16:20:46 发布
阅读量1.6k 收藏 1
点赞数 1
文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45172866/article/details/119975867
版权

下面是vue官网的介绍
在这里插入图片描述
在多个子组件项目中使用这个非常好用。子组件数据传递，我们可能先想到先把子组件数据传到父组件，再由父组件传给另一个子组件,这样使很麻烦的。
现在我们建立一个js文件，让两个子组件或多个子组件共享这里的数据，这里提供读取和修改方法。我在真实的项目中用到这些，用到了elementUI组件，两个Dialog弹窗的嵌套。下面我这个demo的结构跟我真实项目一致，只是数据不同。

父组件

<template>
    <div id="observable-box">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="number" label="学生证编号" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="professional" label="专业" width="180" />
            <el-table-column prop="theClass" label="班级" />
            <el-table-column
                prop="clubMember"
                label="俱乐部"
                :formatter="formatter"
            />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="modify(scope.row)"
                        >修改</el-button
                    >
                    <el-button
                        type="primary"
                        size="mini"
                        :disabled="scope.row.clubMember !== 1"
                        @click="applyQualification(scope.row)"
                        >申请会员</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="修改个人信息"
            :visible.sync="dialogVisible"
            width="800px"
        >
            <Modify
                :modify="needModifyObj"
                @modifyFinish="modifyFinish"
                @closeDialog="closeDialog"
            />
            <MoreInfo />
        </el-dialog>
    </div>
</template>

<script>
import { students } from '@/mook/observableData.js'
import Modify from '@/components/vueObservable/modify.vue'
import MoreInfo from "@/components/vueObservable/moreInfo.vue"

export default {
    name: 'Observable',
    components: {
        Modify,
        MoreInfo
    },
    data() {
        return {
            tableData: students,
            dialogVisible: false,
            needModifyObj: {}
        }
    },
    methods: {
        modify(row) {
            console.log("11:", row);
            this.dialogVisible = true;
            this.needModifyObj = { ...row }
        },
        // 申请会员资格
        applyQualification(row) {
            console.log(row);
        },
        formatter(row) {
            return row.clubMember === 1 ? "非会员" : "会员"
        },
        modifyFinish(data) {
            this.tableData.forEach(item => {
                if (item.number === data.number) {
                    const { professional, name, theClass } = data
                    item.professional = professional;
                    item.name = name;
                    item.theClass = theClass;
                }
            })
        },
        closeDialog() {
            this.dialogVisible = false;
        }
    },
}
</script>

核心代码就是子组件Modify和MoreInfo

子组件Modify

<template>
    <div class="observable-motify">
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="学生证编号：">
                <el-input v-model="form.number" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名：">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="专业：">
                <el-input v-model="form.professional"></el-input>
            </el-form-item>
            <el-form-item label="班级：">
                <el-input v-model="form.theClass"></el-input>
            </el-form-item>

            <el-form-item label="个人成就：">
                <el-button @click="moreInfo" type="primary">添加</el-button>

                <el-table :data="achievementData" style="width: 100%">
                    <el-table-column prop="time" label="时间" width="180" />
                    <el-table-column prop="type" label="成就" width="180" />
                    <el-table-column label="操作">
                        <template>
                            <el-button type="text" size="mini" @click="remove"
                                ><i class="el-icon-close"></i
                            ></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
        <el-row type="flex" justify="center">
            <el-button type="primary" @click="confirm">确 定</el-button>
            <el-button type="primary" @click="cancel">取 消</el-button>
        </el-row>
    </div>
</template>
<script>
import { isEmptyObject } from '@/utils/common.js'
import { store, mutations, resetStore } from './bus.js'
export default {
    props: {
        modify: {
            type: Object,
            default: () => { }
        },
    },
    data() {
        return {
            form: {
                number: '',
                name: '',
                professional: '',
                theClass: '',
            }
        }
    },
    computed: {
        // 该数据是moreInfo.vue选中之后保存在store.achievementList里，这里直接读取就ok
        achievementData() {
            return store.achievementList
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            // 如果不是{}就赋值
            if (!isEmptyObject(this.modify)) {
                this.form = { ...this.modify }
            }
        },
        // 确定 
        confirm() {
            if(this.achievementData && this.achievementData.length){
                // 把一条个人成就插入到form表单中
                this.$set(this.form,"oneAchievement",this.achievementData)
            }
            // 派发事件，修改完把数据回传
            this.$emit("modifyFinish", this.form);
            this.$emit('closeDialog');
            console.log(JSON.parse(JSON.stringify(this.form)));
        },
        cancel() {
            this.$emit('closeDialog');
        },
        moreInfo() {
            // 重置一下数据
            resetStore.resetFunc();
            // 打开弹窗
            mutations.setMoreInfoVisible(true)
        },
        // 移除数据
        remove() {
            mutations.setAchievementList([])
        }
    },
}
</script>

子组件MoreInfo

<template>
    <div class="observable-motify">
        <el-dialog
            append-to-body
            title="荣耀时刻"
            :visible.sync="dialogVisible"
            :before-close="beforeClose"
            @open="openDialog"
            width="800px"
        >
            <el-form ref="form" :model="form" label-width="100px" inline>
                <el-form-item label="时间段">
                    <el-input v-model.trim="form.time"></el-input>
                </el-form-item>
                <el-form-item label="获得成就">
                    <el-input v-model.trim="form.type"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="searchResult" style="width: 100%">
                <el-table-column prop="time" label="时间" />
                <el-table-column prop="type" label="成就" />
                <el-table-column label="选择" center>
                    <template slot-scope="scope">
                        <el-radio
                            v-model="radio"
                            :label="scope.$index"
                            @change.native="getCurrentRow(scope.row)"
                            style="
                                color: #fff;
                                padding-left: 10px;
                                margin-right: -25px;
                            "
                            >{{ "" }}
                        </el-radio>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="center" style="margin-top: 20px">
                <el-button type="primary" @click="confirm">确 定</el-button>
                <el-button type="primary" @click="cancel">取 消</el-button>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
import { achievement } from '@/mook/observableData.js'
import { store, mutations } from './bus.js'
export default {
    data() {
        return {
            form: {
                time: '',
                type: ''
            },
            searchResult: [],
            radio: '',
            selectSearch: []
        }
    },
    computed: {
        dialogVisible() {
            return store.moreInfoVisible
        }
    },
    methods: {
        // 模拟搜索接口，模拟模糊查询
        search() {
            this.searchResult = [];
            if (!this.form.time && !this.form.type) {
                this.$message.error('请输入查询条件');
            } else if (this.form.time && this.form.type) {
                achievement.forEach(item => {
                    if (item.time.includes(this.form.time) && item.type.includes(this.form.type)) {
                        this.searchResult.push(item)
                    }
                })
            } else if (this.form.time && !this.form.type) {
                achievement.forEach(item => {
                    if (item.time.includes(this.form.time)) {
                        this.searchResult.push(item)
                    }
                })
            } else if (!this.form.time && this.form.type) {
                achievement.forEach(item => {
                    if (item.type.includes(this.form.type)) {
                        this.searchResult.push(item)
                    }
                })
            }
        },
        cancel() {
            // 关闭弹窗
            mutations.setMoreInfoVisible(false);
        },
        // 选中数据后，确认
        confirm() {
            // 如果没有选中，有报错提示
            if (!this.selectSearch.length) {
                this.$message.error('请先选中后再提交');
                return;
            }
            // 把数据存放到store
            mutations.setAchievementList(this.selectSearch);
            // 关闭弹窗
            mutations.setMoreInfoVisible(false);
        },
        // 选中搜索出来的数据（单选）
        getCurrentRow(row) {
            this.selectSearch = [];
            this.selectSearch.push({ ...row })
        },
        // 关闭弹窗触发的回调
        beforeClose() {
            mutations.setMoreInfoVisible(false);
        },
        // 打开弹窗触发的回调
        openDialog() {
            // 初始化
            this.searchResult = [];
            this.selectSearch = [];
        }
    },
}
</script>
<style scoped lang="less">
/deep/.el-radio__input.is-checked + .el-radio__label {
    color: #fff;
}
</style>

bus.js

import Vue from 'vue';
// 读取
const store =Vue.observable(
    {
        moreInfoVisible: false,
        achievementList:[],
    });
// 修改
const mutations = {
    setMoreInfoVisible(val){
        store.moreInfoVisible = val;
    },
    setAchievementList(array){
        store.achievementList = array;
    }
}
// 重置
const resetStore = {
    resetFunc(){
        store.moreInfoVisible = false;
        store.achievementList = [];
    }
}
export {
    store,
    mutations,
    resetStore
}

核心代码分析

组件MoreInfo弹窗的打开要依赖组件Modify的添加按钮。我把控制组件MoreInfo关闭的moreInfoVisible放在了bus.js里，引入了bus.js， 组件Modify页面就直接改变moreInfoVisible，组件MoreInfo可以直接读取moreInfoVisible来决定自己的打开和关闭。
对应参数achievementList也是同理，我需要在组件MoreInfo获取，然后存到bus.js的observable里，组件Modify监听bus.js里面的achievementList
最后想看我的源代码在github上：https://github.com/ineedyou1024/front-end-knowledge.git
最后可以互相fork一下，互相学习。

迷茫的mm
关注
【前端知识之Vue】对Vue.observable的了解
weixin_44337386的博客
06-23 1161
本系列主要整理前端面试中需要掌握的知识点。本节介绍对Vue.observable的了解。
Vue创建响应式全局数据--Vue.observable() 实现类似vuex的状态管理功能
Ang_pmj的博客
12-11 1440
记录一下：使用Vue.observable 实现类似vuex的状态管理功能，我也是今天自己测试出来的一、Vue.observable()简介二、如何运用(介绍一下我是如何简单的应用) 一、Vue.observable()简介 Vue.observable(object) 是vue2.6版本新增的功能 它可以让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。 返回的对象可以...
面试官：说说对observable的理解
iygxv
01-19 910
故心故心故心故心小故冲啊 文章目录一、Observable 是什么二、使用场景三、原理分析参考文献 一、Observable 是什么 Observable 翻译过来我们可以理解成可观察的 我们先来看一下其在Vue中的定义 Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器 Vue.observable({ count : 1})
vue中的observable
Cool_so_cool的博客
07-30 243
https://segmentfault.com/a/1190000019292569?utm_source=tag-newest
关于Vue中的observable
最新发布
moon_zq的博客
03-26 479
是 Vue 提供的一种响应式数据处理机制，用于创建可观察对象（observable object）或可观察数组（observable array）。通过将对象或数组转换为可观察状态，我们可以在数据发生变化时自动触发相应的更新操作，从而实现响应式的界面更新。在 Vue.js 中，
vue.observable()
龚珂心的博客
01-18 779
1、observable 是什么 observable翻译过来可以理解成 可观察的 vue 中的定义 Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器 Vue.observable({ count : 1}) 2、使用场景 在非父子组件通信是， 通常可以使用vuex 或者bus 但是使用的功能不太复杂 使用这两个又有点繁琐，这是o
使用Vue.observable()进行状态管理的实例代码详解
10-16
首先，我们创建一个`store.js`文件，其中包含一个使用`Vue.observable()`创建的`store`对象，以及一组`mutations`来修改`store`中的状态： ```javascript import Vue from 'vue'; export let store = Vue....
【JavaScript源代码】Vue局部组件数据共享Vue.observable()的使用.docx
12-29
在不使用大型状态管理库如 Vuex 的情况下，Vue 2.6 引入了一个新的 API —— `Vue.observable()`，使得在局部组件间共享数据变得更加简单。本文将详细探讨如何使用 `Vue.observable()` 来实现这一目标。 首先，我们...
Vue.observable 是什么
qq_42816270的博客
04-09 555
Vue.observable 是 Vue.js 提供的一个 API，它可以将一个普通的 JavaScript 对象转换为响应式对象。通过使用 Vue.observable，可以在任何地方创建一个响应式对象，而不仅仅是在 Vue 实例中使用。它在 Vue.js 的响应式系统中扮演了很重要的角色，可以用于管理状态、状态共享等场景。
vue.Observable ()进行状态管理
lj940628的博客
03-09 248
随着组件的细化，很多时候都需要处理组件状态共享的情况， Vuex可以轻松解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，接下来介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。 简介：官网描述 observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性则通过返回一个函.
Vue.observable()
张木期的博客
11-05 4371
官方文档 Vue.observable() vue2.6发布的一个新的api，可以处理简单的跨组件共享数据状态的问题 ，可以说是个精简版的vuex 示例 // /store/store.js import Vue from 'vue' export const store = Vue.observable({ count: 0 }) export const mutations = { setCount (count) { store.count = count } } 使用 <t
Vue.observable的理解
zz130428的博客
05-22 478
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。源码位置：src\core\observer\index.js。，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。变更，它和被返回的对象是同一个对象。在非父子组件通信时，可以使用通常的。中，被传入的对象会直接被。翻译过来我们可以理解成。
Vue当中的observable是什么？怎么用
weixin_59525879的博客
01-04 773
需要注意的是，observable函数只能在Vue 3.x版本中使用。在Vue 2.x版本中，可以使用Vue.observable方法来实现类似的功能。在Vue中，observable是一个函数，它可以将一个普通的JavaScript对象或数组转换为可观察对象，使其具有响应式的特性。然后，可以将一个对象或数组传递给observable函数，并将结果赋值给一个变量。属性是可观察的，任何对它的修改都会被自动追踪并触发相应的更新。的值发生改变时，Vue将自动重新渲染相关的组件。来访问和更改可观察对象的属性。
vue-observable （拟vuex）
太易博客
12-25 499
Vue.observable( object ) 1.创建 /src/store.js import Vue from 'vue' export const store = Vue.observable({ url: {}, user: {} }); export const mutations = { setUrl(data) { store.url...
Vue.observable详解（细到原码）
常来常往，共同成长
01-14 1545
Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象
使用Vue.observable()进行状态管理
sunhonghui9527的博客
07-15 598
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。 observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性的类型不变量而是一个函数，通过返回一个函数给vie
Vue.observable API的使用
Help Her
12-22 477
来源 这个可以理解成为简化版的Vuex, 因为Vuex使用比较复杂, 在非大型项目中使用起来不方便, 为了简化传值操作, 2.6之后新增此API 使用方法 像 Vuex 一样, 需要新建一个store.js 文件管理state数据和mutation操作, 若组件需要使用数据和方法,import 导入store.js 中的 数据和方法即可 值得注意的是, 数据还是需要放入computed 中, 方法还是需要放入 methods 中 实例 新建文件 import Vue from 'vue'; //
[Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS
weixin_34025051的博客
07-18 265
You most likely already have data or properties in your template which are controlled by third-party components or updated using data binding. You can still use this data as stream by leveraging vue-r...
Vue Observable面试题详解：原理与实战应用
应用场景方面，当我们在非父子组件间进行通信，或者希望避免使用复杂的Vuex（状态管理库）处理简单状态时，`Vue.observable`提供了简洁的方式。通过创建一个响应式的state对象和对应的mutation方法，开发者可以在`....
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值