Vuex基础

Vuex基础

vuex状态管理模式，解决组件之间互相传递的问题

使用步骤

1. 安装vuex：npm install vuex
2. 在src文件下新建store文件夹下新建idnex.js（写和vuex相关的）
   引入vuex：import Vuex from “vuex”
   引入vue：import Vue from “vue”
   注册vuex：Vue.use(Vuex)
   导出给main.js：export default store
3. 将store/index.js导入到main.js：import store from “./store”
   store挂在到根实例上

内容

1. state：需要共享的数据
2. getter：相当于一个计算属性
3. mutation：修改store里的数据
4. action：帮助异步
5. 辅助函数：mapState，mapGetters，mapMutations，mapActions
6. 模块

state：需要共享的数据

新建store文件夹，在store文件夹下新建index.js

const store = new Vuex.Store({
  //所有需要共享的数据
  state:{
   //数据可以是字符，数值等...
  	msg:"共享数据",
  	money:200
  }
})


//取到vuex中的数据,访问store实例, this当前组件实例
this.$store.state.msg

getter：相当于一个计算属性

计算属性不是函数不能传参，但是可以return function(){}

//默认getters里可以接受state
getters:{ 
	meiyuan:function(state){
		return function(rate){
			return state.moeny/rate;
		}
	}
}

//取值
msg:this.$store.getters.meiyuan(10)

//简化写法:
getters:{ 
	meiyuan:state=>rate=>{state.moeny/rate};
}

不推荐使用在data里面 msg:this.$store.state.msg 取数据
推荐写在computer里，数据才是响应式的

computed:{
	msg(){
		return this.$store.state.msg;
	}
}

mutation：修改store里的数据

更改Vuex的store中的状态唯一的方法是提交mutation
mutations必须是同步函数

//第一种写法
mutations:{
	//接受state当参数
	const(state){
		state.money = state.money-10;
	}
}

//改数据，提交mutation
methods:{
	//点击事件
	huaqian(){
		this.$store.commit("cost");
	}
}

mutations本质是一个方法，可以传参

mutations:{
	const(state,n){
		state.money = state.money - n;
	}
}

methods:{
	//点击事件
	huaqian(){
		this.$store.commit("cost",5);
	}
}

//第二种写法，直接传入对象
//传对象的参数名建议使用payload
mutations:{
	cost(state,payload){
		state.money = state.money - payload.num
	}
}

methods:{
	huaqian(){
		this.$store.commit({
			type:"cost",
			money,???
			num:10,
		})
	}
}

action：帮助异步

//第一种写法
actions:{
	//进行异步操作，context相当于store实例
	make(context,num){
		//异步操作
		context.commit({
			type:"cost",
			money:10,
			num:num,
		})
	}
}


//第二种写法
actions:{
	make({commit},num){//结构
		//异步操作
		commit({
			type:"cost",
			money:10,
			num:num,
		})
	}
}


//使用
methods:{
	huaqian(){
		//调用
		this.$store.dispatch("make",100)
	}
}

辅助函数：mapState，mapGetters，mapMutations，mapActions

1. mapState
   引入import {mapState} from ‘vuex’ //不是默认导出不能随便换名

//mapState的结果返回是一个对象
computed:mapState({
	msg:'msg' //等同于msg:this.$store.state.msg
})

//还可以用数组直接接受，把vuex中的msg映射成当前组件的msg
computed:mapState(['msg','money','num'])

//写其他计算属性
computed:{
	...mapState(['msg','money','num']),//扩展运算符拆分，拆成键值对
	fn(){
		return this.box   1
	}
}

2. mapGetters
   同mapState
   引入import {mapState} from ‘vuex’

computed:{
...mapGetters(['commsg','commoney','comnum'])//扩展运算符拆分，拆成键值对
} 

3. mapMutations
   引入import {mapMutations} from ‘vuex’

methods:{
	...mapMutations(['changeMsg'])
}

4. mapActions
   引入import {mapActions} from ‘vuex’

methods:{
	...mapActions(['changeMsg'])
}

使用模块

store/modules存放模块

store/modules/modulesA

export defalut{
	state:{},
	getters:{},
	mutations:{},
	actions:{}
}

在store/index.js导入

import modulesA from "./modules/modulesA"

//注册
modules:{
	modulesA
}

取模块中的数据 this.$store.state.moduleA.msg

使用辅助函数同上

...mapState({
	text:state=>(state.moduleA.text   " "   state.moduleB.text),
})

...mapGetters({
	detail:"moduleA/detail"
}),

...mapMutations(["setText"]),

...mapActions({
	modifyName:"modifyName",
	callAction:"moduleA/callAction"
}),

还可以开启模块命名空间namespace

这篇好文章是转载于：学新通技术网