Vuex安装以及简单封装

一、安装Vuex依赖

npm install vuex --save
1

二、简单封装

下面进行基本的封装
在src下面创建一个名为state的文件夹里面包含：index.js，actions.js ，mutations.js，type.js ，state.js。

state.js:
state是个仓库来存储数据，没有操作，这里存了三个空数组。

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

1
2
3
4
5
6
7
8
9
10
11

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 //导出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

type.js：
主要存固定的变量方法名

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

1
2
3
4
5

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
})

1
2
3
4
5
6
7
8
9
10
11

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

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

1
2
3
4
5
6
7
8
9

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

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

调用仓库数据：

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

1
2

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

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

1
2
3
4
5
6
7
8

  computed: {
    ...mapState({
        bgimg: state => {
          return state.user.bgimg
          },
    })
  },
1
2
3
4
5
6
7