Vue.observable实现一个简易的Vuex状态管理

创建store
/src/store/index.js

import Vue from 'vue';

// 利用Vue.observable 实现一个可响应的对象
export const store =  Vue.observable({
  username: 'aa',
  age: ''
})

// 定义提个mutations， 实现可修改属性
export const mutations = {
  setUsername(name) {
    store.username = name
  },

  setAge(age) {
    store.age = age
  }
}

使用
/src/views/page1/index.vue（已该页面为例子）

<template>
  <div>
    ...
  </div>
</template>
<script>
import { store, mutations } from '@/stores'
export default {
  ...
  mounted() {
    console.log(store.username)
    setTimeout(() => {
      mutations.setUsername('Page1 2222222222222222')
    }, 2000)
  },
  ...
}
</script>
<style lang="scss" scoped>
	...
</style>