vuex的5个核心及封装接口函数

5个核心分别为:state , getter , mutation , action , module

satae:

为单一状态树,在其中定义我们所需要管理的数组,对象 ,字符串等等。定义后在vue.js组件中才可获取你定义的这个对象状态

getter:

有点类似vue.js的计算属性,需要从store的state中派生出一些状态,我们就要用getter,它接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中某个需要派生状态的值)发生改变时才会被重新计算。

(注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。

mapGetters 辅助函数:

 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

mutation:

更改store中state状态的唯一方法就是提交mutation,类似于事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,要改变state的值就在回调函数中改变,要执行这个回调函数,我们需要一个相对应的调用方法:store,commit (必须是同步函数)

commit是仅仅用来提交mutation的,这个过程是同步进行的

dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch(‘action方法名’,值)

commit:同步操作,写法:this.$store.commit(‘mutations方法名’,值)

Store就是把它们联系到一起的对象。Store有以下职责:

维持应用的state:
提供getState( )方法获取state;
提供dispatch(action)方法更新state;
通过subscribe(listener)注册监听器;
通过subscribe(listener)返回的函数注销监听器

提供dispatch(action)方法更新state;
store.dispatch(‘TOGGLE_LOADING’)

这个其实是在store中触发改变它里面的值!

action:

重点:action可以提交mutation,在action中执行store,commit且action中可以又任何异步操作(异步函数写这里)在页面要调用这个action则需执行store,dispatch(还用commit来提交mutation)

module:

它解决了当state中很复杂,囊肿时,module可以将store分割成一个个模块,每个模块都有自己的state,mutation,action,getter。

在封装函数时你先要在一个js文件中建立
state , mutation , action , getter 这4个模块。如:

import Vue from 'vue'

const state = {
  userId: '',
  // 登录状态
  loginStatus: fal
  queryUserInfoHttp: null
}
const getters = {
  getUser: state => {
    return state
  },
  getLoginStatus: state => {
    return state.loginStatus
  }
}
const mutations = {
setQueryUserInfoHttp (state, http) {
    state.queryUserInfoHttp = http
  }
}
const actions = {
  helpCenter_sj: ({commit}, data) => {
    return new Promise((resolve, reject) => {
      let shuju = Vue.http.get('/help/listUI', {params: {type: data.type}})
      resolve(shuju)
      reject(shuju)
    })
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

这 helpCenter_sj函数是我的处理跳转函数

注意:

Vuex 中 使用 Action 处理异步请求时,常规写法如下:

   getMenuAction:(context) =>{
            context.commit('SET_MENU_LIST',['承保2','核保2'])
        }
    }

我们也可以使用如下简化写法,如下:

   actions:{
        getMenuAction:({commit}) =>{
            commit('SET_MENU_LIST',['承保2','核保2'])
        }
    }

为了更好理解我们来看看
 Vuex 中 注册 Action的源码如下

红圈起来的都是它的属性,它每次都接受2个参数。

再来解释 return new Promise((resolve, reject) => {}这条语句

先 打印出来看看

Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法

Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。 (这是简单的解释,更详细解释看https://blog.csdn.net/Wbiokr/article/details/79490390)

这条语句 let shuju = Vue.http.get(‘/help/listUI’, {params: {type: data.type}})

意思是调用 /help/listUI 这个接口,接受条件是type是 data.type 并把得到的值给局部变量shuju

resolve(shuju)
reject(shuju)

分别表示了当 成功/失败 时传回去什么值。

然后在调用界面

this.$store.dispatch('helpCenter_sj', {
type: 1
}).then(response => {

}

这样来调用调用store里的dispatch然后这个属性特效可以调用你刚刚写在js文件里面的某个函数(这个js文件一定要引入,我这是全局引入 import user from ‘./modules/user’ )

这样的话就调用成功了。

后续会继续更新。

发表评论

邮箱地址不会被公开。 必填项已用*标注