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' Vue.config.productionTip = false Vue.use(ElementUI) Vue.prototype.$store = store /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

3、模板调用

<template> <div id="menuItem"> <el-input v-model="nval" placeholder="please input message..."></el-input> <p>{{vcount}}</p> <el-button type="primary" @click="changeStore">click</el-button> </div> </template> <script> export default { name: 'menuItem', props: { count: { type: Number, default: 0 } }, data () { return { nval: '' } }, computed: { vcount () { return this.$store.states.count + this.count } }, mounted () { }, methods: { changeStore () { this.$store.mutations.setMessage(this.nval) this.$store.mutations.setCount(this.vcount) } } } </script> <style lang="scss" scoped> $style-color: #409EFF; #menuItem { background-color: #E9EEF3; color: $style-color; text-align: center; line-height: 30px; margin-bottom: 50px; } #menuItem .el-input { width:50%; } </style>

注：Vue.observable是vue 2.6 新增的