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>