vue2中使用vuex全面解析

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

麻了麻了...

相关推荐
陌小呆^O^9 分钟前
Cmakelist.txt之win-c-udp-server
c语言·开发语言·udp
Gu Gu Study16 分钟前
枚举与lambda表达式,枚举实现单例模式为什么是安全的,lambda表达式与函数式接口的小九九~
java·开发语言
时光の尘30 分钟前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
以后不吃煲仔饭44 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师1 小时前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者1 小时前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟1 小时前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
傻啦嘿哟1 小时前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用1 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net