小项目使用Vue.observable写一个状态管理

创建store

import Vue from 'vue'
//通过Vue.observable创建一个可响应的对象
export const store = Vue.observable({
  userInfo:{},
  roleIds:[]
})

//定义mutations，修改属性
export const mutations = {
  setUserInfo(userInfo){
    store.userInfo = userInfo
  },
  setRoleIds(rolesIds){
    store.roleIds = roleIds
  }
}

在组件中引用

<template>
  <div>
    {{userInfo.name}}
  </div>
</template>
<script>
import {store,mutations} from '../store'
export default {
  computed: {
    userInfo() {
      return store.userInfo
    }  
  },
  created(){
    mutations.setUserInfo({
      name: 'Vue'
    })
  },
}
</script>