使用Vue.obervable(）轻量管理状态数据（vue学习日志6）

官方api参考链接：https://segmentfault.com/a/1190000019292569

创建store.js

import Vue from 'vue'
/*
* 使用Vue.observable()  状态管理
* */
export const state = Vue.observable({message:'hello vue2.6'});
export const mutation = {
  setMessage(value){
    state.message = value
  }
}

组件中
与computer属性配合使用
通过调用mutation中的setMessage方法 改变state中的message

<template>
  <div id="box">
      <p>{{message}}</p>
      <button @click="changeMessage">change</button>
  </div>
</template>

<script>

    import {state,mutation} from "../store";
    export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  computed:{
    message(){
        return state.message
      }
  },
  mounted(){
  },
  methods:{
      changeMessage(){
          mutation.setMessage('welcome to vue')
      }
  }
}
</script>