vue.Observable ()进行状态管理

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

简介：官网描述

observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性则通过返回一个函数给viewModule对象中的属性，从而来监控该属性。返回的对象可以直接用于渲染函数methods和计算属性computed内，并且会在发生改变时触发相应的更新。

创建store.js文件

import Vue from 'vue'
export const state = Vue.observable({
    
    
  screenCars: {
    
    },
})
export const mutations = {
    
    
  updateScreenCars (payload) {
    
    
    state.screenCars = Object.assign({
    
    }, payload)
  },
}

index.vue组件中触发：

<template>
    <div>
        <el-button @click="toSave">保存</el-button>
    </div>
</template>

<script>
import {
     
     state, mutations} from './store.js'
export default {
     
     
  name: 'table_form',
  computed: {
     
     
    screenCars() {
     
     
      return state.screenCars
    },
  },
  methods: {
     
     
    setTest: mutations.updateScreenCars ,
    toSave () {
     
     
    // 此处修改的方法会通知store.js里面的数据发生变化
      this.setTest({
     
     a:1})
    },
  },
}
</script>

总结：

体量比vuex小，使用维护成本相对较低
用于数据共享，当十几个组件同时共用一套数据时候，把数据独立抽离出来，方便维护也可以实现多个组件之间数据的共享和更新

出处：https://www.jianshu.com/p/131a83d1dce4

vue.Observable ()进行状态管理

猜你喜欢