Vue.observable()使用方法

本文轉載自查看原文 2020-02-05 08:21 504

前言

隨着組件的細化，就會遇到多組件狀態共享的情況， 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()進行狀態管理

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 組件公用數據 Vue.observable( ) 淺析Vue.observable()實現類似vuex的狀態管理功能創建響應式全局數據 vue devtools使用方法 Vue 事件的高級使用方法 vue 中JSONPath的使用方法之一【vue】中 $parent 和 $children 的使用方法 vue bus.js 使用方法 VUE字典值使用方法 swiper在vue中正確的使用方法 VUE -- stylus入門使用方法