Vue.observable( object ) 最小化的状态管理工具

官网介绍如下:

Vue-observable

用法

目录结构

新建store

import Vue from 'vue'
export const store = Vue.observable({ count: 0 })
export const mutations = {
  setCount(count) {
    store.count += count
  }
}

组件one.vue

<template>
  <div>
    <span> 组件1的当前值是{{ count }}span>
    <el-button @click="handleClick">点击+1el-button>
  div>
template>

<script>
import { store, mutations } from './store.js'
export default {
  data() {
    return {}
  },
  computed: {
    count() {
      return store.count
    }
  },
  methods: {
    handleClick() {
      mutations.setCount(1)
    }
  }
}
script>

<style lang="scss" scoped>style>

组件too.vue

<template>
  <div>组件2当前值是:{{ count }}div>
template>

<script>
import { store } from './store.js'
export default {
  computed: {
    count() {
      return store.count
    }
  }
}
script>

<style lang="scss" scoped>style>

组件index.vue

<template>
  <div>
    <one />
    <too />
  div>
template>

<script>
import one from './one.vue'
import too from './too.vue'
export default {
  components: {
    one,
    too
  }
}
script>

<style lang="scss" scoped>style>

效果

点击one组件的按钮进行数据的操作 too组件中的数据会同步发生变化
如果我们在写代码时,碰到一些简单的数据结构,可以考虑这样的写法,这样可以更简洁的实现数据几个组件之间的数据共享
https://blog.csdn.net/weixin_56650035/article/details/121778586 也可以参考这个博客,个人觉的用法也写的很详细