vueJs(2.x)+router+vuex简易博客系统<七> 整合vuex

上篇文章我们可以向后台发送请求了，那么如果请求来的数据都在组件内，随着项目不断增大，我们维护起来将会非常困难，还有另外一个问题就是请求来的数据，如果多个组件公用的话，传递起来也是非常困难的一件事情。于是就有了状态统一管理，那么就是今天的主角vuex。

vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
官方的解释可以自行阅读官方文档吧，我这里就用自己的语言把自己理解的说出来。

什么时候使用呢？

项目逐渐庞大，发送请求越来越多，需要统一管理，并且多组件共用同一数据的时候。这个时候我们就可以把它加上了。

如何使用

vuex整体解释对于初级学习的童鞋们来说还是有一定难度的，所以我想先把如何使用写出来，然后在来分析其中的意思，然后自己写一遍就基本可以理解了。

1、首先创建文件夹 store

我们把store理解成一个存放数据的对象，它挂载在全局，这样所有的组件都可以访问到store对象下的数据。

2、store文件夹下面创建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
/* eslint-disable */
Vue.use(Vuex)
const state = {
  articleList:[],
  content:{}
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

该文件笼统来讲就是申明一些数据，并且把数据挂载到全局的对象上

export default new Vuex.Store({
  state,
  actions,
  mutations
})

这段代码的意思是创建 Vuex.Store对象，并在该对象的store对象中传入相应的参数，参数中就把state传入进去(可以理解成就挂载在Store全局对象上)。

在这里我们申明了数据(状态)，那么如何才能让组件使用到这些数据呢？

这个就要依赖另外两个核心概念了：
action：
在这个层面，我们并不能直接更改状态( mutation 必须同步执行)，但是我们可以在这里,进行所有异步操作。
先来看看一个action.js中的代码

import axios from 'axios'
const HOST = 'http://localhost:8082';
export default {
  //初始化信息
  initializeData({ commit,state }) {
    axios.get(HOST+'/article/list')
      .then(function (response) {
        commit('INITIALIZE_DATA',response.data.list);
      })
      .catch(function (error) {
      });
  }
}

我们可以在action中向后台发送请求，以及处理相应的逻辑，然后根据业务需求发送
action中的方法都有两个传入参数：
1、commit
commit(‘INITIALIZE_DATA’,response.data.list); 整个vuex中只能通过通过commit改变数据状态。
2、state
可以获取到全局state中的数据。

mutation：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const INITIALIZE_DATA = 'INITIALIZE_DATA';
export default {
  [INITIALIZE_DATA](state,data) {
    state.articleList = data;
  }
}

第一个参数state,同样还是全局的store中的state;
第二个参数data,就是action中调用commit的时候传递过来的参数

自此，申明状态，改变状态都已经有了，那么组件中是如何触发改变呢。

我们就把项目中的代码贴出来看看吧。

<script>
import { mapState, mapActions } from 'vuex';
  export default{
    name:"contentView",
    data(){
        return {
        }
    },
    props:['id'],
    computed: mapState([
      'content'
    ]),
    components:{
      moduleNav,leftSide,moduleNotice,footerModule
    },
    created(){
      this.contentData(this.id);
    },
    methods: {
      ...mapActions([
        'contentData'
      ])
    }
  }
</script>

第一步：在methods中添加

methods: {
      ...mapActions([
        'contentData'
      ])
    }

将 this.contentData() 映射为 this.$store.dispatch('contentData')，因此可以在组件中通过调用this.contentData()方法调用action中相应的方法。

第二步：

computed: mapState([
      'content'
    ]),

通过上面不难理解这个mapState也是辅助函数帮助映射的，不然的话我们还得通过 this.$store.state.content才能取值。

到此为止vuex我们是全部引入了，总结下vuex的运行步骤吧。

• vue组件中调用 action中的方法
• action中通过和后台进行交互，请求到数据(经过逻辑处理)，commit调用mutation
• mutation中 直接更改了state状态
• state状态改变后，会通知相应的组件更新界面

这样就形成一个单向数据流的形式，多个组件都共享同一个store实例。store中包含 state,action,mutation。
这是一套状态管理的方式，取决于项目的大小，项目小其实也没有必要使用。
理解它之后，具体的一些api可以参考vuex的官方api：https://vuex.vuejs.org/zh-cn/intro.html