基本的vuex封装

简单介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说就是可以存储数据以及状态值的仓库，并且供所有组件共同使用。例如可以存储用户的信息在需要的页面使用，并且有在用户信息有变化时可以在组件内对仓库的用户信息进行修改，例如用户的用户名变化了，可随便对仓库的用户信息里的用户名进行修改，而有关联到用户信息的其他组件或者说页面的用户信息也会跟着变化无需重新通过接口获取。

下面进行基本的封装

创建一个名为vuex的文件夹里面包含：index.js，actions.js ，mutations.js，type.js ，state.js。
state.js:
state是个仓库来存储数据，没有操作，这里存了三个空数组。

const state={
  /*
    首页
  */
  	data:0,
    bannerLbs:[], //首页轮播图
    hotPostLbs:[], //热门帖子
    recommendArticle:[],//推荐文章
}
export default state

actions.js：
这里是最接近页面处理请求的操作文件，不过这里只是将页面所发起的操作提交到 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

const actions={
  /*
    *首页*
  */
    bannerTest({commit},data){ //资讯信息
      commit('BANNER_TEST',data) //根据BANNER_LBS这个名字到mutation.js找到相关操作
    },
    hotPostTest({commit},data){ //热门帖子
      commit('HOTPOST_TEST',data)
    },
    recommendArticleTest({commit},data){ //推荐文章
      commit('RECOMMEND_ARTICLE_TEST',data)
    },
......
}
export default actions //导出

type.js：

export const BANNER_TEST ='BANNER_TEST' //资讯信息
export const HOTPOST_TEST ='HOTPOST_TEST' //热门帖子
export const RECOMMEND_ARTICLE_TEST ='RECOMMEND_ARTICLE_TEST' //推荐文章
//把所有matutaions里面所需要的操作记录在这里面，集中在一起使得你可以很直观的看到你的模块或者app具有哪些状态以及状态变化

mutations.js：
这里是将从action.js提交过来的处理请求进行处理，直接state.js也就是仓库里的数据进行修改或者其他操作

import state from './state'
import * as type from './type.js'  //导入type.js的所有记录
const matutaions={
  /*
    *首页*
  */
    [type.HOT_POST_LBS](state,data){//热门帖子
      state.hotPostTest= data;
    },
    [type.RECOMMEND_ARTICLE](state,data){//推荐文章
      state.recommendArticleTest= data;
},
......
}
export default matutaions

index.js：
上面几个都需要在这里进行注册

import Vuex from 'vuex'
import state from './state'//仓库
import mutations from './mutations'//仓库数据处理
import actions from './actions'//提交数据
Vue.use(Vuex)
export default new Vuex.Store({  //导出
    state,
    mutations,
    actions
})

main.js：
将上述导出的仓库在main.js注册

import store from './vuex/index' 
new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  template: '<App/>'
})

页面使用：
修改仓库数据：

this.$store.dispatch("bannerTest", data);//dispatch('actions里的方法',传入的数据)

调用仓库数据：

this.bannerImgList=this.$store.state.bannerLbs //

不过关于调用还有一种方法：
这种方法比较方便，不需要每次都写个this.$store.state，也不需要把这个值赋值给data里面的数据，也可以实时更新。

//在页面：
import { mapState } from "vuex";
//计算属性里面：
computed: {
    ...mapState(["data", "hotPostLbs"])
  },
  //这样直接可以在组件内使用

最后说几句

差不多就是这样了讲讲vuex的优劣势。
优势：
统一管理各个组件的状态值以及数据，做到数据统一，管理起来也方便。
它解决了非父子组件的消息传递（因为将数据存放在state中）。
并且减少了没必要的过多请求，某些数据已经存储在state中了，要的时候直接获取就好了。
劣势：
刷新浏览器，vuex中的state会重新变为初始状态
（解决方案vuex-along ,vuex-persistedstate）
而且在状态值或者需要重复使用的数据较少的时候，其实用vuex反而是比较累赘了，当然了，你可以不进行封装，只是简单的调用直接store.commit不经过action也是可以，当然了，这是不太规范了。