vue2中使用vuex全面解析

初入前端写的是vue2，近些年一直在做vue3的项目，久未接触过vue2的代码了，今日突然维护了一个v2项目记忆已不似当年，今日对我以往所有接触的vuex使用做个总结。

vue2中使用vuex基础模板

store文件夹下的index.js文件

javascript">import Vue from 'vue'
import Vuex from 'vuex'
import modName from './mod'
Vue.use(Vuex)
export default new Vuex.Store({
	//state用来存放数据,类似data
  state: { 
    name:'蔡徐坤',
    age:'一坤年',
    sex:'男'
  },
   //getters用来返回你基于state想要的新状态,类似于computed(调用时不可以传参数)
   getters:{
    getDescripton(state){
      return state.name+state.age+state.sex
    },
  },
  //mutations用来修改你存放的state数据,类似methods(调用时可以传参数data，注意:这里面只能放同步的方法)
  mutations: {
   getNewName(state,data) {
      state.age++;
      state.name=state.name+data
    }
  },
   //actions也是用来修改你存放的state数据,但是它是通过调用mutations里的方法来实现修改state的值的,actions中的方法默认是异步的,因为他返回的是一个promise对象，由此可见,actions里可以放异步的方法，弥补了mutations不能放异步方法的缺点
  actions: {
 //context上下文可以理解为它是当前的this
  async getUserInfo(context,url){ 
  const res = await axios.get(url)
  //相当于 this.$store.commit,第一个参数是方法名，第二个参数是要传入的数据data
  context.commit('getNewName',res) 
    },
  },
  //分模块的情况下要用到
  modules: {
  mod
  }
})

mod.js文件

javascript">export default{
 namespaced: true,//namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接
  state:{
  modName:'mod蔡徐坤';
    },
  mutations: {
   getNewName(state,data) {
      state.age++;
      state.name=state.name+data
    }
  },
   actions: {
  async getUserInfo(context,url){ 
  const res = await axios.get(url)
  context.commit('getNewName',res) 
    },
  },
   getters:{
    getDescripton(state){
      return state.name+state.age+state.sex
    },
}

页面使用

取state值

javascript">//直接使用
this.$store.state.name//非模块
this.$store.state.mod.modName//模块

//辅助函数emapState
computed:{
//取非模块里值时
...mapState(['name'])//默认name取vuex的name值
...mapState({newName:'name'})//newName取vuex的name值(重命名)
...mapState({newName: state => state.name,})//函数取法更灵活
//取mod模块里的值时
 ...mapState('mod', ['modName']), 
 ...mapState('mod', {'newModName': 'modName'})
 ...mapState({newModName: state => state.newModName.modName,})//函数取法更灵活
}

取getter值

javascript">//直接使用
this.$store.getters.getDescripton//非模块
this.$store.getters.mod.getDescripton//模块

//辅助函数mapGetters
computed:{
//取非模块里值时
...mapGetters(['getDescripton'])
...mapGetters({mewGetDescripton:'getDescripton'})
//取mod模块里的值时
...mapGetters('mod',['getDescripton'])
...mapGetters('mod',{mewGetDescripton:'getDescripton'})
}

mutations修改值

javascript">//直接使用
this.$store.commit('getNewName', data)//非模块
this.$store.commit('mod/getNewName', data)//模块

//辅助函数mapMutations
methods: { 
  //取非模块里值时
  ...mapMutations(['getNewName']), 
  ...mapMutations({'NewGetNewName': 'getNewName'})
  //取mod模块里的值时
  ...mapMutations('mod', ['getNewName']), 
  ...mapMutations('mod',{'NewGetNewName': 'getNewName'})
}

actions修改值

javascript">//直接使用
this.$store.dispatch('getUserInfo', url)
this.$store.dispatch('mod/getUserInfo', getUserInfo)
//辅助函数mapActions
methods: { 
  ...mapActions(['getUserInfo']), 
  ...mapActions({'newGetUserInfo': 'getUserInfo'})
  ...mapActions('mod', ['getUserInfo']), 
  ...mapActions('mod',{'newGetUserInfo': 'getUserInfo'})
}