# Vue.js 的简单状态管理模式 ## 概述 Vue.js 中状态管理首推 Vuex,但当你的项目不大,但有需要用到状态管理的时候可以尝试使用简单的 [store 模式](https://cn.vuejs.org/v2/guide/state-management.html#%E7%AE%80%E5%8D%95%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E8%B5%B7%E6%AD%A5%E4%BD%BF%E7%94%A8)。 ![store实现原理](/public/uploads/2019/11/28/1574903840715103.png "store实现原理") **注意点:** > 所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理 > 不应该在 action 中替换原始的状态对象 - 组件和 store 需要引用同一个共享对象,mutation 才能够被观察 ## 使用 ### 组件 data 属性赋值 > 在组件中将 state 赋值给 data,官方 Demo 使用的就是此 Demo。但有个缺点,每次创建组件实例时,都必须先引用完整的 state,而不是单独引用 state 中的某个状态,否则会出现数据发现改变后无法响应的问题。 store.js ```js let store = { state: { message: 'Hello!' }, setMessageAction(newValue) { this.state.message = newValue console.log('store.js - newValue:', this.state.message) } } export default store ``` 组件引用 ```html <template> <div> <hr /> <h1>{{msg}}</h1> <button @click="change">change Store</button> </div> </template> <script> export default { data() { return { state: '', num: 0 } }, created() { // 注意:这里需要赋值 state 对象,且不能直接赋值 state 对象中的某个值,否则不能触发响应式 this.state = this.$store.state }, computed: { msg() { return this.state.message } }, methods: { change() { this.$store.setMessageAction(this.num++) } } } </script> ``` ### Vue.obseverable > 使用 [Vue.observable( object )](https://cn.vuejs.org/v2/api/#Vue-observable),可避免 [组件-data-属性赋值](#组件-data-属性赋值) 中遇到的缺点 store.js ```js let store = { state: Vue.observable({ message: 'Hello!' }), setMessageAction(newValue) { this.state.message = newValue console.log('store.js - newValue:', this.state.message) } } export default store ``` main.js 中引入 store ```js // 简单 store 模式 import store from './store' Vue.prototype.$store = store ``` 组件引用 ```html <template> <div> <h1>{{msg}}</h1> <button @click="change">change Store</button> </div> </template> <script> export default { data() { return { num: 0 } }, computed: { msg() { // 可以直接引用 state 中具体的状态 return this.$store.state.message } }, methods: { change() { this.$store.setMessageAction(this.num++) } } } </script> ```