Vue局部组件数据共享Vue.observable()的使用

Vue 是一个非常好用的 JavaScript 前端框架，而组件数据共享是 Vue 中非常常见的需求。Vue.observable() 可以用于将任意一个普通对象转化成响应式的对象，从而实现对该对象的数据共享和观测。下面提供关于Vue局部组件数据共享Vue.observable()的使用的攻略。

目录

• Vue.observable() 简介
• 在 Vue 组件中使用 Vue.observable() 共享数据
• 示例1：通过 Vue.observable() 实现在多个组件之间共享数据
• 示例2：在 Vuex 中使用 Vue.observable() 共享模块数据
• 总结

Vue.observable() 简介

Vue.observable() 是一个 Vue.js 内置的 API，可以用于将一个普通对象转化成 Vue 响应式的对象。通过 Vue.observable() 创建出来的对象，可以使其被多个 Vue 组件所共同观测和维护。在单页应用开发场景中，我们通常会用到 Vue.observable() 来实现局部组件之间数据的共享。

在 Vue 组件中使用 Vue.observable() 共享数据

使用 Vue.observable() 在 Vue 组件中实现数据共享，需要使用到两个 Vue 组件核心概念——mixins 和 provide/inject。

• mixins：用于给 Vue 组件混入其他的组件功能。
• provide/inject：用于给父组件传递数据到子组件，而不管组件的层级是如何的。

在提供的示例中，我们将通过 Vue.observable() 来实现在 Vue 组件中共享数据。

示例1：通过 Vue.observable() 实现在多个组件之间共享数据

<!-- 父组件 -->
<template>
  <div>
    <ChildA />
    <ChildB />
  </div>
</template>

<script>
import { observable } from "vue";

const sharedData = observable({
  msg: "Hello World",
});

export default {
  provide: {
    sharedData,
  },
  components: {
    ChildA,
    ChildB,
  },
};
</script>

<!-- 子组件A -->
<template>
  <div>{{ sharedData.msg }}</div>
</template>

<script>
export default {
  inject: ["sharedData"],
};
</script>

<!-- 子组件B -->
<template>
  <input v-model="sharedData.msg" />
</template>

<script>
export default {
  inject: ["sharedData"],
};
</script>

在父组件中，首先通过 Vue.observable() 创建出 sharedData 对象，然后提供给子组件通过 provide/inject 访问。在子组件 A 中，我们直接使用 sharedData 对象中的 msg 属性，而在子组件 B 中，我们使其通过 v-model 绑定到表单元素中，从而改变 sharedData 对象中的 msg 属性。无论是使用 v-model 双向绑定还是直接绑定，对 sharedData.msg 的任何修改行为，都会立刻被其他使用到 sharedData.msg 的组件感知，从而实现了在多个 Vue 组件之间的数据共享。

示例2：在 Vuex 中使用 Vue.observable() 共享模块数据

在 Vuex 中使用 Vue.observable() 可以使我们更加便捷地创建和维护共享数据模块。下面提供一个简单的示例：

import { observable } from "vue";
import { createStore } from "vuex";

const moduleA = {
  state: observable({
    name: "John",
    age: 28,
  }),
  mutations: {
    updateName(state, newname) {
      state.name = newname;
    },
    updateAge(state, newage) {
      state.age = newage;
    },
  },
};

const store = createStore({
  modules: {
    a: moduleA,
  },
});

export default store;

在 Vuex 中，我们通过直接将模块状态 state 传入到 observable() 中，来构建响应式的状态对象。由于状态对象是响应式的，因此我们可以在任何组件上使用它，包括 Vuex 自身的 getter、mutation、action 等方法。在 mutation 中修改 state 中的属性时，由 Vue.observable() 提供的响应式能力也会自动更新组件的渲染视图。

总结

Vue.observable() 是 Vue.js 中用来实现组件数据共享的一个简洁高效的 API。在 Vue 组件、Vuex 等多个场景下都可以使用其来构建响应式的状态数据对象，从而更好的实现组件和状态数据之间的协作。