vue---vux详解

vue---vux详解

  • VUEX 全局状态管理器
    • 什么样的数据需要放在vuex中?
    • 参数---详解
      • `state`
      • `geeters`
      • `mutations`
      • `actions`
      • `modules`
        • 使用
          • modules----state的使用及调用
          • modules----getters的使用及调用
          • modules----mutations的使用及调用
          • modules----actions的使用及调用
    • namespaced---命名空间
      • getters有命名空间
      • mutations有命名空间
      • actions有命名空间
    • 问题----如何在vuex中调用vuex中的方法或事件
    • 使用映射解构的方法在组件中直接调用对应事件,数据名等

VUEX 全局状态管理器

  • vue的全局状态管理器

  • 实现组件之间跨层传递数据

  • 实现数据与视图响应式更新

  • state

  • geeters

  • mutations

  • actions

  • modules

  • namespaced----命名空间

什么样的数据需要放在vuex中?

  • 需要多个组件使用的数据,或者方法

参数—详解

state

  • 相当于vue中的data,用来存储数据的,在vue组件中获取,用 $store.state.数据名字
// 数据
state: {
	// 这个数据写死了
	goods : [{"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/ef617fac-7489-436d-b74e-c43582f09633.jpg","num":1,"price":899,"name":"\u5c0f\u7c73\u7535\u89c64A 32\u82f1\u5bf8","goods_id":2172700021,"select":true},{"buy_limit":1,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/65be1bac-6d3f-3766-3bac-c11b3aa13b8e.webp","num":1,"price":1199,"name":"Redmi Note 7 4GB+64GB \u68a6\u5e7b\u84dd","goods_id":2185200032,"select":true},{"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/a1\/pms_1514387870.88251945.jpg","num":1,"price":3599,"name":"\u5c0f\u7c73\u7b14\u8bb0\u672cAir 12.5  4G 128G \u94f6\u8272","goods_id":2175200001,"select":true}]
}
						
<div class="good" v-for="good in $store.state.goods" :key="good.goods_id">

geeters

- `getters 从现有数据获取到新的数据`,相当于vue组件中的`computed`
- `名字 : state => { 逻辑。。。 ; return 数据}`
- 在vue组件中获取:`$store.gettes.数据名字`
// 使用
getters : {
  goodNum : state => {
	  let num = 0;
	  state.goods.forEach( item => {
		  num += item.num;
	  })
	  return num;
  }
},
						
 <van-tabbar-item to="/cart" icon="setting-o" :badge="$store.getters.goodNum">

mutations

  • mutations 方法,操作数据,相当于vue组件中的methods
  • 在vue组件中使用方法:$store.commit("传过来的事件名字",需要传递的参数);
// 使用
mutations: {
	// delGood事件名字,(state,good),state:对应state中的数据,good:对应组件传递过来的参数
	delGoodVuex(state,good) {
		var flag = window.confirm("你确定要删除码?");
		if(flag) {
			var index = state.goods.indexOf(good);
			state.goods.splice(index,1);
	}
},
// 调用
// delGood 是vue中的事件,
delGood() {
	// this.$store.commit 就是接收,vuex中的事件delGoodVuex,且传递参数this.good.num,
	this.$store.commit("delGoodVuex",this.good.num);
},

actions

  • 关于Ajax异步的方法需要放在actions中,执行异步的方法

  • actions 方法,可以执行异步操作方法,相当于vue组件中的methods

  • 在vue组件中使用:$store.dispatch("方法名字",data);

  • 使用:方法名字({commit},[参数]) { ajax方法};

actions: {
  // 解构mutations中的所有方法
  getCart({commit}) {
	  getCartAPI()
	  .then( res => {
		  // 已经结构了vuex中的mutations中的方法,
		  // 所以调用初始化购物车的方法只需要:commit("方法名字",需要传输过来的数据);
		  // 这里是因为调用了vuex本身的事件方法,所以使用此写法
		  // 因为commit 是已经解构的方法,所以只需正确的找到需要的方法就行了,如果传参,就写参数
		  commit("INIT_CART",res.data);
	  })
	  .catch( err => {
		  console.log(err);
	  })
  }
},
mutations : {
	// 初始化购物车的方法
	INIT_CART(state,goods) {
		state.goods = goods;
	}
}
  • 调用actions中的方法时
  • $store.dispatch("方法名字");
  • 方法名字:就是在actions中定义的方法的名字
// 调用actions的方法 
// 在vue中调用vuex的actions中的方法
this.$store.dispatch("getCart");

modules

  • 模块
  • Vuex允许将store分割成模块(module)
  • 每一个模块都有vuex中的所有方法,statemutationsactionsgetters

使用

  • 在store文件夹下,创建modules文件夹,在其下在创建对应的vuex模块:比如:登录模块的login.js
// 登录模块的state
const state = {}
// 登录模块的getters
const getters = {}
// 登录模块的mutations
const mutations = {}
// 登录模块的actions
const actions = {}
// 导出默认的模块方法
export default {state,getters,mutations,actions}
  • 需要将模块导入vuex中,在注册
// 导入 login模块
import login from './modules/Login.js'
// 注册到vuex中
modules : {
	login
}
modules----state的使用及调用
  • state就是存储数据的
  • modules中的state是每个模块私有的,有命名空间
  • 调用使用:$store.state.注册的模块名.参数等
// 使用,存储数据
const state = {
	name : "momo",
	age : 20
}

				
<p>获取vuex中的模块数据 {{$store.state.login.name}}----{{$store.state.login.age}}p>
modules----getters的使用及调用
  • 对应的方法有三个参数,且它不是私有,默认没有命名空间
  • 参数1:state 自己这个模块的state
  • 参数2:getters 全局的getters,包括模块的getters
  • 参数3:rootState 全局的state
// 使用
const getters = {
	<!-- 参数1,参数2,参数3,参考以上 -->
	getGoods(state,getters,rootState){
		console.log(state,getters,rootState)
		return getters.goodNum;
	}
}
  • getters没有命名空间所以直接访问vuex中的gettser就可以访问到模块中的数据
  • $store.getters.模块中的getters中的数据名字

<p>getter:{{$store.getters.getGoods}}p>
modules----mutations的使用及调用
  • 与vue中的正常使用一样
  • 模块中的mutations也是没有命名空间的,所以也可以直接使用
  • vuex中的调用mutations的方法进行调用
  • $store.commit("需要调用的模块中的方法名字",需要传递的参数)
// 使用
const mutations = {
	ADD_AGE(state,step=1) {
		state.age += step;
	}
}
  • 调用
  • $store.commit("需要调用的模块中的方法名字",需要传递的参数)

			
<button @click="$store.commit('ADD_AGE')">年龄加button>
modules----actions的使用及调用
  • 用法与vuex中的差不多
  • 其中vuex中的{commit}解构vuex中的方法,模块中的{context},得到上下文中的所有方法
  • 具体情况可以自行打印查看
  • 方法名字({context},[参数]) { 逻辑 }
// 使用
const actions = {
	addAge(context,arg){
		// 这个是调用上下文中定义mutations的ADD_AGE事件
		context.commit("ADD_AGE",arg);
		var good = {"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/ef617fac-7489-436d-b74e-c43582f09633.jpg","num":2,"price":8990,"name":"小米55","goods_id":2172700028,"select":true};
		console.log(context);
		 // 模块访问vuex中全局的方法
		 context.commit("addGood",good);
		 // 模块可以访问vuex全局的state
		 context.rootState.goods.pop();
	}
}
  • 因为没有命名空间,所以可以直接使用vuex的调用方法进行调用
  • $store.dispatch('需要调用的模块的actions方法')

	
<button @click="$store.dispatch('addAge')">actions年龄减button>

namespaced—命名空间

  • namespaced : true/false
  • true:打开命名空间
  • false:反之
  • 在导出的时候添加模块的命名空间
// 导出
export default {
	// 命名空间
	namespaced : true,
	state,
	getters,
	mutations,
	actions
}

getters有命名空间

  • 参数:数据名字(state,getters,rootState,rootGetters) {逻辑; return 数据}
  • 访问:$store.getters["模块名字/数据名字"];
  • 映射方法:...mapGetters["模块名字/数据名字"]

mutations有命名空间

  • 参数:方法名字(state,参数);
  • 访问:$store.commit("模块名字/方法名字",需要传递的数据参数)
  • 映射方法:...mapMutations["模块名字/数据名字"]

actions有命名空间

问题----如何在vuex中调用vuex中的方法或事件

  • 使用:this.commit("需要调用的方法")

使用映射解构的方法在组件中直接调用对应事件,数据名等

  • 那个组件使用那个vuex中的属性就导入对应的映射方法

  • 映射方法对应:mapState,mapGetters,mapMutations,mapActions

  • 导入方法:import {对应的映射方法} from 'vuex';

  • 使用方法:...对应的映射方法(['需要调用的vuex的方法,或者数据'])

  • 原因:这样可以不用在写,$store.state.数据名等这种

  • vuex中getters 映射成vue中的computed 就是对应的使用方法需要在对用映射成的vue的方法中才能使用

  • vuex中的actions ,映射成vue中的methds

  • 需要使用时,就跟使用vue中的数据,方法一样

// 导入映射的vuex的方法
	// vuex中getters 映射成vue中的computed
	// vuex中的actions ,映射成vue中的methds
import {mapGetters,mapActions} from 'vuex';
import Bus from '@/utils/Bus.js';
export default{
	data(){return {
		isShow:true,
		active : 0
	}},
	computed : {
		...mapGetters(['goodNum'])
	},
	created(){
		// 因为有了映射的方法,我们就不用再使用dispatch这种了
		// this.$store.dispatch("getCart");
		this.getCart();
	},
	methods : {
		...mapActions(["getCart"])
	}
}

你可能感兴趣的:(Vue,JavaScript,项目,vue,vuex)