Vue学习日记（四）——Vue状态管理vuex

前言

先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。

说实在话，我在阅读vuex文档的时候，也很难以去理解vuex，甚至觉得没有使用它我也可以。但是直到我在项目碰到下面这些问题：

1. 当路由切换的时候，原本路由的数据太多，传递过去太麻烦。
2. 有些数据是多个路由需要用到的，那我就需要从后台获取多次数据

当然，这些问题都可以解决，就是在实例化vue对象的时候，就将这些数据绑定在window对象上面。但是我们也不得不设想：

1. 万一数据太多了，那么可阅读性是不是会下降
2. 如果只是修改单独的数据，是不是所有的页面都可以更新

对于第一个问题，答案是肯定的，虽然说，我们现在也可以用模块化的思想去使可阅读性更加好，但是没有一个规范，对于刚入手项目的总是难以理解。

对于第二个问题，当你页面少的时候，是不会出现这样的问题的，但是如果页面多了，你就会发现，当你把window.$data里面的数据更新的时候，所有页面的计算属性都会失效，就是你无论怎么修改数据，页面都不会更新数据。

这时候，就需要用到我们的vuex了。

vuex介绍

那么vuex 到底是什么？

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

是不是还是有点难以理解，其实简单的说vuex就是把这个项目的所有数据都存储在一个地方，方便修改和获取数据。

例如，我们从下面这张图给大家先简单的分析一下

在这张图片里面我们很明显可以看到三个部分

1. Vue Components 表示vue里面的组件
2. Backend API 后台API
3. vuex 组件里面的数据管理

我们可以生动形象的理解，如果说Vuex是一个仓库，那么么Vue Components就就是售货者，负责把仓库里面的东西展现出来，Backend API就相当于入货的人，负责将货物买进来（也就是后台返回数据给前端，保存在vuex里面）。而vuex就是仓库，这个仓库里面有货物state，有管理货物进出的Muations

引用vuex

在说state之前，我们可以先在我们vue项目引用vuex

npm install vuex

然后在我们的src目录下新建一个store的文件夹，在store文件夹里面新建一个index.js的文件

// ~/src/store/index.js
import Vue from 'Vue'
import Vuex from 'Vuex'
// 在这里声明实例一个Vue 去引用Vuex状态管理插件
// 这样就可以减少在main.js里面的代码量了
Vue.use(Vuex)
// 返回store实例对象
export default new Vuex.Store({
})

这里说一下吧，这里Store其实就是相当vuex实例化的一个仓库。

data替代者state

为什么说state是data的替代者呢？

很容易理解，就是讲组件里面的局部参数，改成了一个可以全局使用的参数state，例如，我们在me.vue组件引用的数据todo。

那么我们可以在store里面这样实例化它出来

// ~/src/store/index.js
// ...
export default new Vuex.Store({
  state: {
    todo: []
  }
})

那么，我们在组件里面怎么使用这个数据呢？

// me.vue组件文件
// ...
<script type="text/ecmascript-6">
export default {
  data() {
    meTodo: [] // 然后在方法里面引用this.meTodo = this.$store.state.todo
  }
}
</script>
// ...

是不是很简单，但是我们不可能每次使用这个值都要获取一次吧，这些vue团队也都想好了，我们可以通过计算属性来获取state里面的数据。

// ...
<script type="text/ecmascript-6">
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
  computed: mapState([
  // 映射 this.todo 为 store.state.todo
  'todo'
])
}
</script>
// ...

相当于

// ...
<script type="text/ecmascript-6">
export default {
  computed:
  todo () {
    return this.$store.state.todo
  }
])
}
</script>
// ...

计算属性Getter

有时候我们会需要对state的数据进行一些过滤操作，例如我们只要在todo里面大于10的数字，如果是用computed的话，我们就需要使用filter函数，为了更加简便，vuex也给我们提供了计算属性getter。

我们可以修改我们的~/src/store/index文件

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  }
})

然后在me.vue里面引用

// ...
<script type="text/ecmascript-6">
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      'todo'
    ])
  }
}
</script>
// ...

这样就可以简单拿到大于10的todo数据了

修改state的Mutation

我们说了怎么获取数据，但是我们应该怎么修改数据呢，是不是直接赋值给数据就可以了呢？

答案当然不是，vuex规定了，我们只能用Mutation来进行修改数据，那么，我们怎么进行修改数据呢？
修改我们的~/src/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  }
})

然后在我们的me.vue组件里面修改

// ...
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from 'vuex'
// 在单独构建的版本中辅助函数为 Vuex.mapMutations
import { mapMutations } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      'todo'
    ])
  },
  method: {
    ...mapMutations(
      [
        // 将 `this.revsiseTode()` 映射为 `this.$store.commit('revsiseTode')`
        // 如果想传递参数可以使用this.$store.commit('revsiseTode', oneTode)
        // 或者Action
        'revsiseTode'
      ]
    )
  }
}

Action的使用

写了这么久，终于到了Action的出场了，其实不管怎么说，Action主要是为了与后台交互而使用的属性，这里，我就假设todo的数据在路由/me/gettodo里面能够获取，因此，修改~/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  },
  actions: {
    getTodo: context => Vue.http.get('/me/gettodo', (res) => {
      context.commit('revsiseTode', res.body.todo)
    })
  }
})

然后就可以通过触发我们的actions来提交mutations去修改state的数据了，在me.vue修改

// ...
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from 'vuex'
// 在单独构建的版本中辅助函数为 Vuex.mapMutations
import { mapActions } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      'todo'
    ])
  },
  method: {
    ...mapActions(
      [
        'reviseTodo', // 将 `this.reviseTodo()` 映射为 `this.$store.dispatch('reviseTodo')
      ]
    )
  }
}
// ...

vuex目录结构

上面主要只是简单的讲了一下vuex的使用，也只是讲了一部分，不过相信看了这里之后再去官网就会有更深的理解。当然这些都是简单的使用，如果想把vuex运用到项目，必须把他们模块化更加好看，vuex官网也为我们提供了规范的项目目录结构，我这里就不多啰嗦几句了。

总结

vuex其实不难，我一开始也以为很难一直学不会，只要多使用就会觉得，其实也就只是别人都封装好了的方法，我们去使用这个简便的仓库就行了。