Vue单页面使用Vuex汇总

单页面使用

单页面使用 state

//一、直接获取
this.$store.user.userName
//二、利用辅助函数
	//首先引入辅助函数
	import { mapState } from "vuex";
	//创建computed来获取
	export default {
		computed:{
			//mapState([模块名称]，{
			//	监听者变量：所实时监听的状态数据
			//})
			// 官网说法：把 `this.usName ` 映射为 `this.$store.user.userName`
			...mapState('user/',{
				usName : s => s.userName
			}),
		}
	}
	//页面使用，如同在data内创建 usName 参数，使用如下：
	this.usName

单页面使用 getters

//首先引入辅助函数
import { mapGetters } from "vuex";
//创建computed来获取
export default {
	computed:{
		//mapGetters ([模块名称]，{
		//	监听者变量：所实时监听的状态数据
		//})
		// 官网说法：把 `this.usName ` 映射为 `this.$store.user.userName`
		...mapGetters ('user/',{
			usName : 'userName'
		}),
	}
}
//页面使用，如同在data内创建 usName 参数，使用如下：
this.usName

单页面使用 mutations

import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations([
      'increment', 
      // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' 
      // 将 `this.incrementBy(amount)` 
      // 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' 
      // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}
//使用：
this.increment()
this.incrementBy()
this.add()

单页面使用 actions

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}
//使用：
this.increment()
this.incrementBy()
this.add()

单模块使用

在vuex单模块内综合使用

//vuex模板代码
state:{
	count:0
}
mutations: {
    someMutation(state) {
      // 变更状态
      state.count++
    }
}
actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  },
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
  // async + await 
		async actionA ({ commit }) {
    	commit('gotData', await getData())
	  },
	  async actionB ({ dispatch, commit }) {
	    await dispatch('actionA') // 等待 actionA 完成
	    commit('gotOtherData', await getOtherData())
	  }
}

跨模块使用

store 普及
其中有：
	commit, 		//执行：mutations 
	dispatch, 		//执行：actions 
	state, 			//访问当前模块state
	rootState, 		//访问Vuex的所有模块state
	rootGetters, 	//访问Vuex的所有模块getters
	getters 		//访问当前模块getters

state

const actions = {
    async login(store, config = {}) {
        const { rootState } = store
		rootState.user.userName
		//rootState.模块名.attrName
    }
}

getters

const actions = {
    async login(store, config = {}) {
        const { rootGetters } = store
		rootGetters['vip/get']
		//rootGetters[路径]
    }
}

mutations

const actions = {
    async login(store, config = {}) {
        const { commit } = store
		commit('vip/receive', data, {root: true}) // 调用其他模块的 mutations
		//commit(方法路径,数据（没数据预留）,配置项（告诉vue这非本模块方法）)
    }
}

actions

const actions = {
    async login(store, config = {}) {
        const { dispatch } = store
		dispatch('vip/get', {}, {root: true}) // 调用其他模块的 actions
		//dispatch(方法路径,数据（没数据预留）,配置项（告诉vue这非本模块方法）)
    }
}