Vue.observable()

最新推荐文章于 2024-03-26 16:20:46 发布

一晌贪欢i

最新推荐文章于 2024-03-26 16:20:46 发布

阅读量4.3k

点赞数 1

分类专栏： Vue api 学习

本文链接：https://blog.csdn.net/qq_27674439/article/details/109509581

版权

Vue api 学习专栏收录该内容

10 篇文章 5 订阅

订阅专栏

官方文档 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
  }
}

使用

<template>
    <div>
        <label for="bookNum">数 量</label>
            <button @click="setCount(count+1)">+</button>
            <span>{{count}}</span>
            <button @click="setCount(count-1)">-</button>
    </div>
</template>

<script>
import { store, mutations } from '../store/store' // Vue2.6新增API Observable

export default {
  name: 'Add',
  computed: {
    count () {
      return store.count
    }
  },
  methods: {
    setCount: mutations.setCount
  }
}
</script>