Vuex实践

1. Vuex核心概念

2. Vuex应用场景

3. Vuex表单处理

1. Vuex核心概念

状态管理模式

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，可以简单理解为Vuex是一个公共状态库

Vuex 使用一个 Store 对象管理应用的状态，一个 Store 包括 State, Getter, Mutation, Action 四个属性
State：State 意为“状态”，是 vuex 状态管理的数据源
Getter：Getter 的作用与 filters 有一些相似，可以将 State 进行过滤后输出。
Mutation：Mutaion 是 vuex 中改变 State 的唯一途径（严格模式下），并且只能是同步操作。
Action：一些对 State 的异步操作可以放在 Action 中，并通过在 Action 提交 Mutaion 变更状态。
Module：当 Store 对象过于庞大时，可根据具体的业务需求分为多个 Module。

2. Vuex应用场景

1.1 跨组件通信

vuex 是通过将 state 作为数据中心、各个组件共享 state 实现跨组件通信的，数据完全独立于组件，因此将组件间共享的数据置于 state 中能有效解决多层级组件嵌套的跨组件通信问题

1.2 Vuex作为数据存储中心

vuex 的 state 在单页应用的开发中本身具有一个“数据库”的作用，可以将组件中用到的数据存储在 state 中，主要有两种数据会使用 vuex 进行管理：

> 组件之间全局共享的数据，比如用户的登录信息，权限信息

> 通过后端异步请求的数据，比如列表数据，详情数据

3. Vuex表单处理

> 安装Vuex

npm install vuex --save

> 引入Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

> 表单处理1

<input v-model="permission.routers">

permission是在计算属性中返回的一个属于Vuex store的对象，v-model双向绑定修改不是在mutation函数里执行的，就会抛出错误

解决方法：给 <input> 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用 action

<input :value="message" @input="updateMessage">

computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

> 表单处理2

使用带有 setter 的双向绑定计算属性

<input v-model="message">

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}