Vue.observable

Vue.observable API 的使用

 

1.介绍：如果项目不是足够大的话，为避免代码繁琐冗余，最好不要使用它。Vue.observable 是vue2.6版本新增的，可以实现一些简单的跨组件数据状态共享

// 创建store目录，store目录下创建index.js

import Vue from 'vue'

export const store = Vue.observable({
  count: 0,
  name: '李四'
})

export const mutations = {
  setCount (count) {
    store.count = count
  },
  changeName (name) {
    store.name = name
  }
}


// 在组件中使用

<template>

    <div class="container">

      <button @click="setCount(count+1)">count++</button>

    </div>

</template>

<script>

import { store, mutations } from '@/store/index'

export default {

    computed: {
        
        // 如果store中的数据发生变化重新计算
        count () {
          return store.count
        },

        name () {
          return store.name
        }
     },

    methods () {
        
        // 将store中的mutations方法赋值拿到
        setCount: mutations.setCount
    }
}

</script>

// 或者可以绑定到Vue的原型上

// store/index.js

import Vue from 'vue'

const store = {

  state: Vue.observable({
    count: 0,
    name: '李四'
  }),

  mutations: {
    setCount (count) {
      store.state.count = count
    },
    changeName (name) {
      store.state.name = name
    }
  }

}

export default store


// 在组件中使用

<script>

export default {

  created () {

    // 通过this.store来调用
    console.log(this.store)
  }
}

</script>