Vue.observable API的使用

最新推荐文章于 2025-06-07 18:14:10 发布

喵喵草

最新推荐文章于 2025-06-07 18:14:10 发布

阅读量506

点赞数

CC 4.0 BY-SA版权

文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_51066024/article/details/111520400

本文介绍了一种简化版的Vuex实现方案，适用于小型项目。通过创建store管理状态，并定义变更方法，实现组件间的数据共享。文章提供了具体示例，展示了如何在组件中使用这些状态和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来源

这个可以理解成为简化版的Vuex, 因为Vuex使用比较复杂, 在非大型项目中使用起来不方便, 为了简化传值操作, 2.6之后新增此API

使用方法

像 Vuex 一样, 需要新建一个store.js 文件管理state数据和mutation操作,
若组件需要使用数据和方法,import 导入store.js 中的数据和方法即可
值得注意的是, 数据还是需要放入computed 中, 方法还是需要放入 methods 中

实例

新建文件

import Vue from 'vue';

// 微型vuex , 创建一个state
export const store = Vue.observable({ count: 0, name: 'zs' });

// 创建修改state的方法
export const change = {
  setCount(count) {
    console.log(this);
    // 注意这个方法一定不能使用this, 因为调用时this会指向调用这个方法的组件
    store.count = count; 
  },
  setName(name) {
    store.name = name;
  },
};

组件使用

<template>
  <div>
    <p>count : {{ count }}</p>
    <p>name: {{ name }}</p>
    <button @click="setCount(count + 1)">+</button>
    <button @click="setCount(count - 1)">-</button>
    <button @click="setName(newName)">change name</button>
  </div>
</template>

<script>
import { store, change } from '../store/ob';

export default {
  data() {
    return {
      newName: 'NEW NAME',
    };
  },

  computed: {
    count() {
      return store.count;
    },
    name() {
      return store.name;
    },
  },

  methods: {
    setCount: change.setCount,
    setName: change.setName
  },
};
</script>