vue-简单的状态管理实现

在vue项目中，有很多数据会在组件之间共享，这时就需要一个状态管理工具。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，但vuex适用于中大型项目，对于小项目来说是繁琐冗余的。本文就来讲述在小项目中如何利用vue的observable来构建一个状态管理器。

1、创建 store

store.js

import Vue from 'vue'

const states = Vue.observable({
  message: 'hello vue',
  count: 0
})

const mutations = {
  setMessage (message) {
    states.message = message
  },
  setCount (count) {
    states.count = count
  }
}

export default {
  states,
  mutations
}

2、全局引入

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './util/store.js'