Vue.js 的简单状态管理模式

概述

Vue.js 中状态管理首推 Vuex,但当你的项目不大,但有需要用到状态管理的时候可以尝试使用简单的 store 模式

store实现原理

注意点:

所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理

不应该在 action 中替换原始的状态对象 - 组件和 store 需要引用同一个共享对象,mutation 才能够被观察

使用

组件 data 属性赋值

在组件中将 state 赋值给 data,官方 Demo 使用的就是此 Demo。但有个缺点,每次创建组件实例时,都必须先引用完整的 state,而不是单独引用 state 中的某个状态,否则会出现数据发现改变后无法响应的问题。

store.js

let store = {
  state: {
    message: 'Hello!'
  },
  setMessageAction(newValue) {
    this.state.message = newValue
    console.log('store.js - newValue:', this.state.message)
  }
}
export default store

组件引用

<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 ),可避免 组件-data-属性赋值 中遇到的缺点

store.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

// 简单 store 模式
import store from './store'
Vue.prototype.$store = store

组件引用

<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>
Last Updated: 7/8/2019, 2:37:51 PM