Vue.Observable

最新推荐文章于 2024-09-13 15:14:16 发布

橙蚊镜0819

最新推荐文章于 2024-09-13 15:14:16 发布

阅读量2.8k

点赞数 2

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/cwjxyp/article/details/124009985

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中利用`Vue.observable`进行状态管理，以简化非父子组件间的通信。通过创建一个可响应的state对象并定义相应的mutations方法，可以在组件中直接访问和修改state的值，同时在值变化时触发视图更新。这种方式在不使用Vuex且功能需求不复杂时，提供了一种轻量级的解决方案。

摘要由CSDN通过智能技术生成

定义

让一个对象可响应，vue内部会用它来处理data函数返回的对象
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器
observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性则通过返回一个函数给viewModule对象中的属性，从而来监控该属性。返回的对象可以直接用于渲染函数methods和计算属性computed内，并且会在发生改变时触发相应的更新。

使用

在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择
创建一个js文件

// 引入vue
import Vue from 'vue
// 创建state对象，使用observable让state对象可响应
export let state = Vue.observable({
  name: '张三',
  'age': 38
})
// 创建对应的方法
export let mutations = {
  changeName(name) {
    state.name = name
  },
  setAge(age) {
    state.age = age
  }
}

在.vue文件中直接使用即可

<template>
  <div>
    姓名：{{ name }}
    年龄：{{ age }}
    <button @click="changeName('李四')">改变姓名</button>
    <button @click="setAge(18)">改变年龄</button>
  </div>
</template>
import { state, mutations } from '@/store
export default {
  // 在计算属性中拿到值
  computed: {
    name() {
      return state.name
    },
    age() {
      return state.age
    }
  },
  // 调用mutations里面的方法，更新数据
  methods: {
    changeName: mutations.changeName,
    setAge: mutations.setAge
  }
}