Vuex的详细使用

最新推荐文章于 2023-07-02 14:22:07 发布
最新推荐文章于 2023-07-02 14:22:07 发布
阅读量1.4k 收藏 3
点赞数 3
分类专栏： 前端学习 vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42125732/article/details/115891350
版权

Vuex是做什么的?

在这里插入图片描述

管理什么状态

有什么状态需要在多个组件上共享呢
1.如果你做过大型开放，你一定遇到过多个状态，在多个界面之间的共享问题。
2.比如用户的登录状态、用户名称、头像、地理位置信息等等。
3.比如商品的收藏、购物车中的物品等等

在这里插入图片描述
在这里插入图片描述
对我来说 我认为Vuex就是一个大管家统一来帮助我们管理，看一下官方的图片

1.若你要修改state里面的状态，最好是要经过Mutations，因为这里能让Devtools监听到你的State变化，方便我们在使用Vuex能观察到哪个组件改变了该值以及操作
2.Actions这一步主要是有异步操作的时候（请求网络接口）

在这里插入图片描述

让我们来看看简单的例子使用

子组件的代码
<template>
	<div>
		<h2>我是子组件</h2>
		<h2>{{$store.state.counter}}</h2> //值是直接可以通过$store.state拿到对应的值
	</div>
</template>

<script>
	export default{
		name:'APP',
	}
</script>

<style>
</style>


父组件的代码
<template>
  <div id="app">
	<h2>{{message}}</h2>
	<h2>{{$store.state.counter}}</h2> //值是直接可以通过$store.state拿到对应的值
	<button @click="addition">+</button>
	<button @click="subtraction">-</button>
	<h2>-----------------</h2>
	<hello-vuex ></hello-vuex>
  </div>
</template>

<script>
	import HelloVuex from './components/HelloVuex.vue'
	export default{
		name:'APP',
		data(){
			return{
				message:'我是APP组件',
			}
		},
		methods:{
			addition(){
				this.$store.commit('increment') //通过commit 然后选择store下对应的mutations方法
			},
			subtraction(){
				this.$store.commit('decrement')
			},
		},
		components:{
			HelloVuex
		}
	}
	
</script>

<style lang="less">

</style>


Vuex----------store中的index.js代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  		//变量定义在state中
	  counter:520
  },
  mutations: {
	  //对应的方法要定义在mutations
	  increment(state){
		  state.counter++
	  },
	  decrement(state){
		  state.counter--
	  }
  },
  actions: {
  },
  getters:{
	  
  },
  modules: {
  }
})

结果如下图
在这里插入图片描述

Getter的使用

Getter基本使用–有时候我们需要从store获取到state一些变异后的状态，比如下面的Store中

例子一 比如要获取counter的平方
                              store下面的index.js的代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  counter:520
  },
  mutations: {
	  //方法
	  increment(state){
		  state.counter++
	  },
	  decrement(state){
		  state.counter--
	  }
  },
  actions: {
  },
  getters:{ //重点是这里
	  //比如要获取counter的平方
	  powerCounter(state){
		  return state.counter * state.counter
	  }
  },
  modules: {
  }
})

<template>
  <div id="app">
	<h2>{{message}}</h2>
	<h2>{{$store.state.counter}}</h2>
	<button @click="addition">+</button>
	<button @click="subtraction">-</button>
	<h2>-----App内容:getters的相关信息------------</h2>
	<h2>getters:{{$store.getters.powerCounter}}</h2>  //直接通过$store.getters获取到对应的值
	
	<h2>-----------------</h2>
	<hello-vuex ></hello-vuex>
  </div>
</template>

在这里插入图片描述

例子二 获取学生年龄大于20的个数

store中的index.js代码 state增加了students  getters增加了新的gettersmoreage获取年龄超过二十岁的方法
----------------------------
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  counter:520,
	  students:[
		  {
			  id:1,
			  name:'chen',
			  age:18
		  },
		  {
			  id:2,
			  name:'si',
			  age:28
		  },
		  {
			  id:3,
			  name:'na',
			  age:38
		  },
		  {
			  id:4,
			  name:'rich',
			  age:48
		  },
	  ]
  },
  mutations: {
	  //方法
	  increment(state){
		  state.counter++
	  },
	  decrement(state){
		  state.counter--
	  }
  },
  actions: {
  },
  getters:{
	  //比如要获取counter的平方
	  powerCounter(state){
		  return state.counter * state.counter
	  },
	  //获取年龄超过20岁的
	  gettersmoreage(state){
		  return state.students.filter(v =>{
			  return v.age >=20
		  })
	  }
  },
  modules: {
  }
})

父组件的代码  有两种方式可以实现可以拿到年龄超过20岁的，第一种是通过计算属性在单个页面下
（但是多个页面如果都想同时使用的话，就要复制一份代码就很累赘）
第二种方法就是通过vuex直接在getters定义处理好的方法，这边直接调用$store.getters.xxx（）方法即可
---------------------
<template>
  <div id="app">
	<h2>{{message}}</h2>
	<h2>{{$store.state.counter}}</h2>
	<button @click="addition">+</button>
	<button @click="subtraction">-</button>
	<h2>-----App内容:getters的相关信息------------</h2>
	<h2>getters:{{$store.getters.powerCounter}}</h2>
	<h3>getters:{{$store.getters.gettersmoreage}}</h3>
	<h3>computed:{{moreage}}</h3>
	
	<h2>-----------------</h2>
	<hello-vuex ></hello-vuex>
  </div>
</template>

<script>
	 import HelloVuex from './components/HelloVuex.vue'
	export default{
		name:'APP',
		data(){
			return{
				message:'我是APP组件',
			}
		},
		computed:{
			moreage(){ //可以通过计算属性来过滤获取
				return this.$store.state.students.filter(v =>{
					return v.age >= 20
				})	
			}	
		},
		methods:{
			addition(){
				this.$store.commit('increment') //通过commit 然后选择对应的方法
			},
			subtraction(){
				this.$store.commit('decrement')
			},
		},
		components:{
			HelloVuex
		}
	}
	
</script>

在这里插入图片描述

例子三 Getters作为参数和传递参数

在这里插入图片描述
在这里插入图片描述
结果如下图:
在这里插入图片描述

例子四 从外面传入参数进来 Getters接受参数并返回一个函数（这里描述不是很好，大家看看例子）

<template>
  <div id="app">
	<h2>-----App内容:getters的相关信息------------</h2>
	//向getters里面的方法传递一个参数
	<h3>getters传递参数返回函数:{{$store.getters.moreAgeStu(8)}}</h3> 
	<h3>getters传递参数返回函数:{{$store.getters.moreAgeStu(30)}}</h3>
  </div>
</template>

 state: {
	  counter:520,
	  students:[
		  {
			  id:1,
			  name:'chen',
			  age:18
		  },
		  {
			  id:2,
			  name:'si',
			  age:28
		  },
		  {
			  id:3,
			  name:'na',
			  age:38
		  },
		  {
			  id:4,
			  name:'rich',
			  age:48
		  },
	  ]
  },
 getters:{
	  //获取别人传入参数年龄的方法 ---返回一个函数
	  moreAgeStu(state){
		return function(enterage){ //接收传递进来的参数
			return state.students.filter(v => v.age > enterage) //es6语法 简写
		}
		/*
		这里也可以简写成
		return enterage =>{
			return state.students.filter(v => v.age > enterage)
		}
		但是阅读性太差了 不推荐大家这样写
		*/
	  },
	  
  },

结果如图所示
在这里插入图片描述

Mutations的详细使用

Vuex的store状态的更新唯一方式：提交Mutations

例子一 Mutations传递参数（单个）

<h2>-----App内容:mutations的详细使用------------</h2>
	<button @click="addCount(5)">+5</button>
	<button @click="addCount(10)">+10</button>

methods:{
	addition(){
		this.$store.commit('increment') //通过commit 然后选择对应的方法
	},
	subtraction(){
		this.$store.commit('decrement')
	},
	//加入上面的方法
	addCount(count){
		this.$store.commit('incrementCount',count) //传过去参数
	}
},

在store的index.js下面中的mutations方法下面添加
  mutations: {
	  //方法
	  increment(state){
		  state.counter++
	  },
	  decrement(state){
		  state.counter--
	  },
	  //详细使用
	  incrementCount(state,count){ //第二个接收传入进来的参数
		  state.counter += count //进行操作
	  },
  },

在这里插入图片描述

例子二 Mutations传递参数 但是如果参数不是一个呢？（参数被称为是mutations的载荷（Payload））
比如我们有很多参数要传递
这个时候，我们通常会以对象的形式传递，也是Payload是一个对象
再从这个对象抽取出相关的信息

<h2>-----App内容:mutations的详细使用------------</h2>
	<button @click="addStudent()">添加学生</button>

methods:{
	addStudent(){
		const stu = {
			id:115,
			name:'curry',
			age:33,
		}
		this.$store.commit('maddStudent',stu)
	},
},

  mutations: {
	  //添加学生
	  maddStudent(state,stu){
		  state.students.push(stu)
	  }
  },

结果如图所示

在这里插入图片描述

Mutations的提交风格

正常一般的提交风格
在这里插入图片描述
返回的数据如下
在这里插入图片描述
所以直接处理数据即可
在这里插入图片描述

特殊的提交风格
在这里插入图片描述
返回的数据如下
在这里插入图片描述
所以应该把第二个传进来的参数改为payload，payload是一个对象
在这里插入图片描述

小小的补充一下响应式原理
响应式原理：

vue2.0在初始化数据时,会使用Object.defineProperty这个函数重新定义data中所有的属性，当页面使用对应属性时，首先会进行依赖收集（收集当前组件中的watcher），当属性发生变化时会通知相关的依赖进行更新操作（发布订阅）

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

这里Vuex的响应式例子 （Vue.set,Vue.delete ）

<h2>-----App内容:info响应式原理------------</h2>
	<h2>{{$store.state.info}}</h2>

methods:{
	//响应式
	updateinfo(){
		this.$store.commit('updateinfo')
	}
},

在store中的index中
 mutations: {
	  //响应式
	  updateinfo(state){
		  state.info.name= 'sina' //页面跟着变化
		  //state.info['address'] = '洛杉矶' //注意！！！这个对象可以添加 但是做不到响应式 页面不会跟着改变
		  //pop push都是响应式的
		  //Vue.set是响应式的
		  //数组使用Vue.set时 例子 Vue.set(this.letters,0, 'bbbbb')中间参数是一个number
		  Vue.set(state.info,'address','洛杉矶') //对象响应式
		  delete state.info.age //这里也做到了响应式 因为是vue3.0通过proxy实现响应式
		  Vue.delete(state.info,'hh') //这里是vue2.0的删除响应式
	  }
  },

结果如图所示
在这里插入图片描述

点击按钮页面变化为
在这里插入图片描述

Action的使用

在这里插入图片描述
当你发送异步请求的修改数据的时候 需要在action去请求—是为了让devtools能监测到变化


## store下的index.js的部分代码


 state: {
	  counter:520,
	  students:[
		  {
			  id:1,
			  name:'chen',
			  age:18
		  },
		  {
			  id:2,
			  name:'si',
			  age:28
		  },
		  {
			  id:3,
			  name:'na',
			  age:38
		  },
		  {
			  id:4,
			  name:'rich',
			  age:48
		  },
	  ],
	  info:{
		  name:'kobe',
		  age:42,
		  hh:11,
	  }
  },
  mutations: {
	  //响应式
	  updateinfo(state){
	  //不能直接在这里异步修改数据
		  state.info.name= 'sina' //页面跟着变化
		  Vue.set(state.info,'address','洛杉矶') //对象响应式
		  delete state.info.age //这里也做到了响应式 因为是vue3.0通过proxy实现响应式
		  Vue.delete(state.info,'hh') //这里是vue2.0的删除响应式	  		  
	  }
  },
  actions: {
	  // context:上下文
	  //异步修改state的属性 只能这样做
	  aUpdateInfo(context,payload){ //只能填写context方法 接收payload参数
		  setTimeout(()=>{   //调用上面的mutations下面的updateinfo方法
			  context.commit('updateinfo') （因为修改数据只能在mutations下修改）
			  console.log(payload)
		  },1000)
	  }
  },

<h2>-----App内容:info响应式原理------------</h2>
	<h2>{{$store.state.info}}</h2>
	<button @click="updateinfo()">响应式改变</button>
----------------------------------------------------
methods:{
updateinfo(){
	// this.$store.commit('updateinfo') //这是同步修改state属性
	this.$store.dispatch('aUpdateInfo','我是payload') //这是异步请求修改state 需要用到dispatch拿action里面的方法，也可以传递参数
	}
}

在这里插入图片描述
在这里插入图片描述
结果如图所示
在这里插入图片描述

教你们一个优雅的优化----------Promise

/*优雅的写法 Promise*/
actions: {
	 aUpdateInfo(context,payload){
		  return new Promise((resolve,reject) => { //优雅的优化
			  setTimeout(()=>{
				  context.commit('updateinfo')
				  console.log(payload)
				  resolve('hello 我是promise')
			  },1000)
		  })
	  }
  }


------------外面调用的方法---------------------
updateinfo(){
	/*优雅的写法*/
	this.$store.dispatch('aUpdateInfo','我是携带的信息').then(res=>{
		console.log('里面完成了提交') //回调告诉完成了
		console.log(res) //还可以接收promise中resolve传递出来的参数
	})
}

兄弟萌 够不够优雅 这里的优化就是到时候登录请求接口要用到的

结果截图如下
在这里插入图片描述

最后一个重点了哟--------modules的使用


//创建对象
const moduleA ={
	state:{
		name:'zhangsan'
	},
	mutations:{
		updateAName(state,payload){
			state.name = payload
		}
	},
	// context:上下文 这个比较特殊  它只会调用自己模块的东西
	actions:{
		aUpdateName(context){
			setTimeout(()=>{
				context.commit('updateAName','wangwu')
			},1000)
		}
	},
	getters:{
		fullname(state){
			return state.name + '帅哥'
		},
		fullname2(state,getters){
			return getters.fullname + 'sina'
		},
		//在模块里有第三个参数 rootState --可以拿到下面大模块的state
		fullname3(state, getters, rootState){
			return getters.fullname2 + rootState.counter
		}
	},
}

export default new Vuex.Store({
	modules: {
	  a:moduleA
  }
})

 <h2>-----App内容:modules中的内容------------</h2>
	<h2>moduleA的state:{{$store.state.a}}</h2>
	<button @click="updateAname">修改模块A的名字</button>
	<h2>moduleA的getter：{{$store.getters.fullname}}</h2>
	<h2>moduleA的getter：{{$store.getters.fullname2}}</h2>
	<h2>moduleA的getter：{{$store.getters.fullname3}}</h2>
	<button @click="mokuaiyibu">模块异步修改名字</button>
 <h2>-----App内容:modules中的内容------------</h2>
---------------------------------------------------------------------
methods{
	/*模块的方法*/
	updateAname(){
		this.$store.commit('updateAName','lisi')
	},
	mokuaiyibu(){
		this.$store.dispatch('aUpdateName')
	}
}

结果跟上面基本差不多， module的用法基本跟上面差不多 主要要注意actions中的context，我们打印该数据看一下----------主要多了根的概念
在这里插入图片描述

最后添上所有的代码

目录结构
在这里插入图片描述

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations.js'
import actions from './actions.js'
import getters from './getters.js'
import moduleA from './module/moduleA.js'

Vue.use(Vuex)


const state = {
  counter:520,
  students:[
	  {
		  id:1,
		  name:'chen',
		  age:18
	  },
	  {
		  id:2,
		  name:'si',
		  age:28
	  },
	  {
		  id:3,
		  name:'na',
		  age:38
	  },
	  {
		  id:4,
		  name:'rich',
		  age:48
	  },
  ],
  info:{
	  name:'kobe',
	  age:42,
	  hh:11,
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
	  a:moduleA
  }
})

mutations.js

import {INCREMENTCOUNT} from './mutations-types.js'
import Vue from 'vue'

export default {

	  //方法
	  increment(state){
		  state.counter++
	  },
	  decrement(state){
		  state.counter--
	  },
	  //详细使用
	  /*
	  一般提交风格
	  incrementCount(state,count){ //第二个接收传入进来的参数
		  console.log(count) //payload是一个对象 接收特殊风格的提交
		  state.counter += count //进行操作
	  },
	  */
	  //特殊提交风格
	  [INCREMENTCOUNT](state,payload){ //第二个接收传入进来的参数
		  console.log(payload.count) //payload是一个对象 接收特殊风格的提交
		  state.counter += payload.count //进行操作
	  },
	  //添加学生(添加对象)
	  maddStudent(state,stu){
		  state.students.push(stu)
	  },
	  //响应式
	  updateinfo(state){
		  state.info.name= 'sina' //页面跟着变化
		  //pop push都是响应式的
		  //state.info['address'] = '洛杉矶' //这个对象可以添加 但是做不到响应式 页面不会跟着改变
		  //Vue.set是响应式的
		  //数组使用Vue.set时 例子 Vue.set(this.letters,0, 'bbbbb')中间参数是一个number
		  Vue.set(state.info,'address','洛杉矶') //对象响应式
		  delete state.info.age //这里也做到了响应式 因为是vue3.0通过proxy实现响应式
		  Vue.delete(state.info,'hh') //这里是vue2.0的删除响应式	  		  
	  }

}

mutations-types.js

export const INCREMENTCOUNT = 'incrementCount'

actions.js

export default {
	// context:上下文 就是这个store对象
	//异步修改state的属性 只能这样做
	// aUpdateInfo(context,payload){
			 //  setTimeout(()=>{
				//   context.commit('updateinfo')
				//   console.log(payload.message)
				//   payload.success()
			 //  },1000)
	// }
	
	/*优雅的写法 Promise*/
	aUpdateInfo(context,payload){
			  return new Promise((resolve,reject) => {
				  setTimeout(()=>{
					  context.commit('updateinfo')
					  console.log(payload)
					  resolve('hello 我是promise')
				  },1000)
			  })
	}
}

getters.js

export default {
	  //比如要获取counter的平方
	  powerCounter(state){
		  return state.counter * state.counter
	  },
	  //获取年龄超过20岁的
	  gettersmoreage(state){
		  return state.students.filter(v =>{
			  return v.age >=20
		  })
	  },
	  //getters作为传递参数
	  gettersmoreagelength(state,getters){
		  return getters.gettersmoreage.length
	  },
	  //获取别人传入参数年龄的方法 ---返回一个函数
	  moreAgeStu(state){
		// return function(enterage){ //接收传递进来的参数
		// 	return state.students.filter(v => v.age > enterage) //es6语法 简写
		// }	
		
		return enterage =>{
			return state.students.filter(v => v.age > enterage)
		}
	  },
	  
}

moduleA.js

export default{
	state:{
		name:'zhangsan'
	},
	mutations:{
		updateAName(state,payload){
			state.name = payload
		}
	},
	// context:上下文 这个比较特殊  它只会调用自己模块的东西
	actions:{
		aUpdateName(context){
			console.log(context)
			setTimeout(()=>{
				context.commit('updateAName','wangwu')
			},1000)
		}
	},
	getters:{
		fullname(state){
			return state.name + '帅哥'
		},
		fullname2(state,getters){
			return getters.fullname + 'sina'
		},
		//在模块里有第三个参数 rootState --可以拿到下面大模块的state
		fullname3(state, getters, rootState){
			return getters.fullname2 + rootState.counter
		}
	},
}

父组件 APP.vue

<template>
  <div id="app">
	 <h2>-----App内容:modules中的内容------------</h2>
		<h2>moduleA的state:{{$store.state.a}}</h2>
		<button @click="updateAname">修改模块A的名字</button>
		<h2>moduleA的getter：{{$store.getters.fullname}}</h2>
		<h2>moduleA的getter：{{$store.getters.fullname2}}</h2>
		<h2>moduleA的getter：{{$store.getters.fullname3}}</h2>
		<button @click="mokuaiyibu">模块异步修改名字</button>
	 <h2>-----App内容:modules中的内容------------</h2>
	<h2>{{message}}</h2>
	<h2>{{$store.state.counter}}</h2>
	<button @click="addition">+</button>
	<button @click="subtraction">-</button>
	<h2>-----App内容:info响应式原理------------</h2>
	<h2>{{$store.state.info}}</h2>
	<button @click="updateinfo()">响应式改变</button>
	<h2>-----App内容:mutations的详细使用------------</h2>
	<button @click="addCount(5)">+5</button>
	<button @click="addCount(10)">+10</button>
	<button @click="addStudent()">添加学生</button>
	<h2>-----App内容:getters的相关信息------------</h2>
	<h2>getters:{{$store.getters.powerCounter}}</h2>
	<h3>getters:{{$store.getters.gettersmoreage}}</h3>
	<h3>computed:{{moreage}}</h3>
	<h3>getters作为参数:{{$store.getters.gettersmoreagelength}}</h3>
	<h3>getters传递参数返回函数:{{$store.getters.moreAgeStu(8)}}</h3>
	<h3>getters传递参数返回函数:{{$store.getters.moreAgeStu(30)}}</h3>
	<h2>-----------------</h2>
	<hello-vuex ></hello-vuex>
  </div>
</template>

<script>
	import HelloVuex from './components/HelloVuex.vue'
	import {INCREMENTCOUNT} from './store/mutations-types.js'
	export default{
		name:'APP',
		data(){
			return{
				message:'我是APP组件',
			}
		},
		computed:{
			moreage(){ //可以通过计算属性来过滤获取
				return this.$store.state.students.filter(v =>{
					return v.age >= 20
				})	
			}	
		},
		methods:{
			addition(){
				this.$store.commit('increment') //通过commit 然后选择对应的方法
			},
			subtraction(){
				this.$store.commit('decrement')
			},
			addCount(count){
				//正常的提交风格
				// this.$store.commit('incrementCount',count) //传过去参数		
				//特殊的提交风格
				// this.$store.commit({
				// 	type:'incrementCount',
				// 	count:count
				// })
				//特殊的提交风格以及使用常量
				this.$store.commit({
					type:INCREMENTCOUNT,
					count:count
				})
				
			},
			addStudent(){
				const stu = {
					id:115,
					name:'curry',
					age:33,
				}
				this.$store.commit('maddStudent',stu)
			},
			//响应式
			updateinfo(){
				// this.$store.commit('updateinfo') //这是同步修改state属性
				// this.$store.dispatch('aUpdateInfo',{
				// 	message: '我是携带的信息',
				// 	success: ()=>{
				// 		console.log('里面已经完成')
				// 	}
				// }) //这是异步请求修改state 需要用到dispatch 也可以传递参数（传递对象）
				
				/*优雅的写法*/
				this.$store.dispatch('aUpdateInfo','我是携带的信息').then(res=>{
					console.log('里面完成了提交')
					console.log(res)
				})
			},
			/*模块的方法*/
			updateAname(){
				this.$store.commit('updateAName','lisi')
			},
			mokuaiyibu(){
				this.$store.dispatch('aUpdateName')
			}
		},
		components:{
			HelloVuex
		}
	}
	
</script>

<style lang="less">

</style>

子组件HelloVuex.vue

<template>
	<div>
		<h2>我是子组件</h2>
		<h2>{{$store.state.counter}}</h2>
		<h2>getters:{{$store.getters.powerCounter}}</h2>
		<h3>getters:{{$store.getters.gettersmoreage}}</h3>
	</div>
</template>

<script>
	export default{
		name:'APP',
	}
</script>

<style>
</style>

面试题

1.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。

场景：多个组件共享数据或者是跨组件传递数据时

vuex的流程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值

2.vuex有哪几种属性

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

  1. state：vuex的基本数据，用来存储变量

  2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

  3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

  4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

  5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async
await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便

4.Vuex中actions和mutations的区别

Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation
非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数
(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})
Action Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。 .
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
是小橙丶
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vuex使用详细资料包
11-11
本详细资料包围绕"Vuex使用"展开，旨在帮助开发者深入理解和熟练运用Vuex来优化Vue项目的开发。 在Vuex中，一个应用的所有状态被存储在一个单一的store对象中。这个store包含了应用中的所有状态，以及进行状态变更...
vuex数据持久化插件
CSDN_shipingan的博客
03-28 559
vuex固话插件 浏览器刷新不丢失 本地存储
Vuex 怎么实现数据持续化
weixin_43503730的博客
06-30 171
Vuex 怎么实现数据持续化 当进行 vuex 进行数据存储的时，浏览器刷新页面导致数据丢失，为了不让数据丢失，保持数据持久化，进行如下操作即可： 安装 vuex-persistedstate 插件 cnpm i vuex-persisitedstate --save 在 store/index.js 中引入 import persistedstate from 'vuex-persistedstate' export default new Vuex.Store({ modules: {
vuex-persistedstate —— 数据持久化
最新发布
灵魂学者的博客
07-02 1673
本篇内容就来介绍如何来使用这款第三方包来完成数据持久化 —— vuex-persistedstate；在之前的篇目当中对于 Vuex 中的相关内容都讲得差不多，但是在项目中去使用vuex，虽然数据状态得到管理了，但数据在每一次都需要去重新加载，那么对于数据的持久化vue是没有给解决的，而是通过第三方的工具去进行数据的持久化的，[ 注：怎么读？persistedstate —— per西施特day ]
Vuex持久化存储之vuex-persist
热门推荐
一只小白奔向大牛的故事
07-13 1万+
Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。 引入vuex-persist插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下： 安装： npm install --save vuex-per...
vuex是什么？
webblock的博客
03-26 2932
vuex解释 vuex是一个专门为vue.js应用程序开发的状态管理模式。通俗点说就是我们项目中需要共享的一些数据的管理容器，这里的状态就是数据。 那么什么情况下才应该使用vuex呢？ 简单的说就是当你在构建一个中大型单页用的时候，需要在组件外部管理状态，这个时候vuex就是最好的选择。 vuex由哪几部分组成的呢？ State：状态 vuex存放数据的地方 Getters：获取器 vuex通过现...
Vuex的实战使用详解
10-16
在介绍Vuex的实战使用中，首先得...通过示例代码的详细展示，大家应该能够更好地理解Vuex在实际项目中的应用。它不仅是对全局状态的一种高效管理，也使得状态管理变得可预测和可控，从而提升Vue应用的性能和可维护性。
vuex入门最详细整理
10-15
当组件间的通信变得复杂时，使用 Vuex 可以使状态管理更加清晰和易于维护。在上述例子中，通过 Vuex，我们可以直接在父组件中通过 `$store.state.show` 设置状态，子组件则可以监听并响应这个状态的变化，简化了组件...
vuex 使用步骤代码
09-08
以下是对 Vuex 的使用步骤和相关知识点的详细说明： 1. **安装**： 在项目中使用 Vuex，首先需要通过 npm 或 yarn 安装它： ```bash npm install vuex # 或 yarn add vuex ``` 2. **创建 store**： 在项目...
Vuex新手的理解与使用详解
10-16
这篇文章主要针对Vuex的新手，详细介绍如何理解和使用它。 1. Vuex 的概念理解 在深入Vuex之前，我们首先要了解Vue.js的核心特性——数据绑定和组件化。Vue通过数据绑定解决了页面逻辑数据与视图一致性的问题，而...
Vuex详解，一文彻底搞懂Vuex
m0_67401746的博客
07-28 2645
其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一。
Vuex介绍
m0_53151031的博客
11-15 4159
一、Vuex简介 二、了解vuex中的各个js文件的用途 三、利用vuex同步存值 四、利用vuex取值 五、Vuex的异步加载问题及后台调用问题
vuex使用
jomes_wang的博客
06-13 3591
1. vuex简介vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧，如果不懂的话，建议先学完vue的基础知识再看vuex。 2. vuex的组成结构示意图vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味...
Vuex ——详细介绍
m0_67401606的博客
07-28 2109
Vuex是一个专门为Vue.js应用程序开发的，它采用应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。可以理解为将多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他组件可以使用，它最大的特点是一般情况下，我们会在Vuex中存放一些需要在多个界面中进行共享的信息。...
vuex
qmt95的博客
05-23 720
Vuex 1. 什么是Vuex? vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护 2.Vuex由五部分组成 state: 存放状态，例如你要存放的数据 getters： 计算属性，可以通过this.$store.getters来获取存放在state里面的数据 mutations： 改变状态，唯一能改变state的状态就是通过提交mutations来改变，this.$store.commit() a
【Vue系列】vuex详解，一篇彻底搞懂vuex
pakerder的博客
11-04 2010
让你真正理解vuex！它的工作原理用我们生活中通俗的例子很容易进行理解：把store表示饭店，把Vue components比作去餐厅吃饭的客人，Actions比作服务员，Mutations比作后厨团队，State比作吃到嘴里的菜。dispath（‘jia’，2）比作点餐，点多少份；commit则为服务员手里的点餐宝或者点餐软件把你需要的餐告诉后厨团队...
Vuex的创建和简单使用
简单点的博客
02-20 1764
Vuex的创建和简单的使用
Vue2.x中Vuex的多种写法
weixin_46013619的博客
08-11 974
首先安装Vuex yarn add vuex 在main中引入并且在新建的store文件夹下的index.js文件中使用use注册，至此所有VueComponent、Vue实例中都可以看见$store main.js import Vue from "vue"; import App from "./App.vue"; import store from "@/store"; Vue.config.productionTip = false; new Vue({ store, render.
什么是vuex?(五分钟理解vuex)
08-15 709
1.什么是vuex? 官方的理解是：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 2.什么又是状态管理呢？ 让我们从一个简单的 Vue 计数应用开始： new Vue({ // state data () { retur
详细解释一下vuex的使用方法
06-07
好的，我很乐意为您解释一下Vuex的使用方法。 首先，Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它有助于在应用程序中管理和共享状态，例如用户信息、购物车、主题等。Vuex将状态存储在一个单一的对象中，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值