Vue.observable()使用方法

Posted 2021-03-12 lijianming180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.observable()使用方法相关的知识，希望对你有一定的参考价值。

前言

随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。

用法

第一步

首先创建一个 store.js，包含一个 store和一个 mutations，分别用来指向数据和处理方法。

//store.js
import Vue from 'vue';

export let store =Vue.observable({count:0,name:'李四'});
export let mutations={
    setCount(count){
        store.count=count;
    },
    changeName(name){
        store.name=name;
    }
}

第二步

在组件xxx.vue中引用，在组件里使用数据和方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
大专栏  Vue.observable()使用方法ss="line">19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<template>
  <div id="app">
    <p>count:{{count}}</p>
    <p>name:{{name}}</p>
    <button @click="setCount(count+1)">+</button>
    <button @click="setCount(count-1)">-</button>
    <button @click="changeName(name2)">change</button>
  </div>
</template>

<script>

import { store, mutations } from "./store";

export default {
    name: "App",
    data() {
        return {
            name2: '改变后的name'
        }
    }
    computed: {
        count() {
            return store.count;
        },
        name() {
            return store.name
        }
    },
    methods: {
        setCount: mutations.setCount,
        changeName: mutations.changeName
    }
};
</script>

参考文章

使用Vue.observable()进行状态管理

以上是关于Vue.observable()使用方法的主要内容，如果未能解决你的问题，请参考以下文章

观察 Vue Observable 的变化

Vue.observable()的使用,小型Vuex的使用

Vue 全局变量破坏使用 TypeScript 构建

Vue Router 实现原理