学习笔记《Vuex 的响应式编程》

项目使用 Flux 模式来实现的 SPA，Vuex 是不可绕过的

Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。
from http://www.ruanyifeng.com/blog/2016/01/flux.html

网上有一本电子书：《Vuex Concepts: The Flux Application Architecture for Vue.js》对 Vuex 是 Flux 实现介绍的非常深入浅出，可以搜索到下载地址：
https://leanpub.com/vuex

官方文档是必要的手册补充：
https://vuex.vuejs.org/en/

（本文以下内容为目前自身项目的阶段性设计，所以不建议阅读）

步骤一：

通过异步请求的方式，从后端获取到页面需要的数据，将获取到的数据保存到 Vuex 中

建立 store.js 作为 Vuex 的数据存放对象，使用 axios 对数据进行异步加载：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex, VueAxios, axios)

export default new Vuex.Store({
  state: {
    courses: {} // 如果需要深度响应，必须写清楚对象，形如：courses: {a:''}
  },
  mutations: {
    setCourses (state, res) {
      state.courses = res
    }
  },
  actions: {
    getCourses (store) {
      axios.get('/getCourses').then((response) => {
        store.commit('setCourses', response.data)
      })
    }
  }
})

在任何页面中（一般在 layout 中）调用基于 Vue 对象的这段代码，就可以对 Vuex 中的数据进行初始化：

this.$store.dispatch('getCourses')

步骤二：

子模块响应 Vuex 中的数据变化，调用 Vuex 的 getters 接口获取最新加载的数据，并渲染页面

先将 Vuex 中的数据对象映射到子模块中

computed: mapState([
  'courses'
]),

然后对这个数据对象建立 watch 监控 courses 的数据变化

watch:{
  courses:function(){
    this.courseName = this.$store.getters.getCourseById(this.courseId).courseName;
  }
},

上面的例子里面使用了 Vuex 的 getters 接口，方便数据获取的封装处理，getters 定义在 store.js 中：

getters: {
    getCourseById: (state, getters) => (id) => {
      return state.courses.find(course => course.course_id == id)
    }
  }

踩坑：

子模块中如果有同名的数据对象，会让 Vuex 的响应失败，比如前面的例子中，如果有这样的代码在预定义中：
```
data () {
  return {
    courses: ''
  }
},
```

getters mutations actions 三者的差异：

getters：第一个参数是 state，可以拿到数据，getters会暴露给 store.getters 进行直接调用

mutations：第一个参数是 state，相当于 setters，可以对 state 进行直接的写入操作

actions：参数中没有 state，所以不能直接的操作 state 的值，但是可以调用 getters 和 mutations 来进行对数据变化的控制

深度响应问题

有时候因为 state 的结构会比较复杂，而默认用 state.test.a = value 这样的方式是无法响应的，所以需要用：

mutations: {
  setTest (state, value) {
    Vue.set(state.test, 'a', value)
  },
},

mapState 和 mapActions

Vue 提供了 mapState 和 mapActions 两个方法，可以将 Vuex 里面的 state 和 actions 映射到 components 里面，于是可以在 components 中这么使用：

this.stateName
this.actionName()

PS：mapState 必须在 computed 属性中使用，mapActions 必须在 methods 方法中使用

最后编辑于：2017.12.06 15:22:00

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

学习笔记《Vuex 的响应式编程》