vue---vux详解

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}]
}

						<!-- // 调用          goods，就是数据名字-->
<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;
  }
},

						<!-- 调用       goodNum就是已经计算过的数据名字   -->
 <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中的所有方法，state，mutations，actions，getters
使用
  • 在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
}

<!-- 调用 -->
				<!-- 获取vuex登录模块中的名字，年龄 -->
<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中的数据名字
<!--    getters没有命名空间所以直接访问vuex中的gettser就可以访问到模块中的数据 -->
<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有命名空间

  • 参数：方法名字({dispatch,commit,getters,rootGetters},参数);
  • 参数：方法名字(context,参数);
  • 访问：$store.dispatch("模块名字/方法名字",需要传递的数据参数)
  • 映射方法：...mapDispatch["模块名字/数据名字"]

问题----如何在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"])
	}
}
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue