vuex知识梳理

最新推荐文章于 2024-06-02 21:27:30 发布
最新推荐文章于 2024-06-02 21:27:30 发布
阅读量91 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45985175/article/details/120468827
版权

1、vuex

  • 多个组件需要共享数据时
  • 多个组件依赖于同一个状态
  • 来自不同组件的行为需要变更同一状态

，在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
在这里插入图片描述
store文件下的index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

main.js

import Vue from 'vue'
import App from './App.vue'
//引入store
import store from './store/index.js'

Vue.config.productionTip = false
import Vuex from 'vuex'
Vue.use(Vuex)
new Vue({
  el:"#app",
  render:h=>h(App),
  store:store
  
})

2、vuex求和案例

初始化state里中的数据、配置actions、配置mutations，操作文件store/index.js

//App.vue
<template>
  <div class="container">
	<Count/>
  </div>
</template>

<script>
import Count from './components/Count'
export default {
name:'App',
components:{
	Count
}
}
</script>

<style>
.container{
	display: flex;
	justify-content: space-around;
}
img{
	width: 100%;
}
</style>

//count.vue
<template>
	<div>
		<h1>当前求和为：???</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
			},
			decrement(){
				
			},
			incrementOdd(){
		
			},
			incrementWait(){
		
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>


//main.js
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
}
//准备mutations——用于操作数据（state）
const mutations = {

}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

在这里插入图片描述

//Count.vue
<template>
	<div>
		<h1>当前求和为：???</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.dispatch('jia',this.n)
			},
			decrement(){
				
			},
			incrementOdd(){
		
			},
			incrementWait(){
		
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>


//store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	jia:function(context,value){
		console.log("action中的加被调用了",context,value)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {

}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

在这里插入图片描述

const actions = {
	jia:function(context,value){
		console.log("action中的加被调用了",context,value)
		context.commit('JIA',value)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
JIA(state,value)
{
	console.log("mutations里的JIA被调用了",state,value)
}
}

在这里插入图片描述

const mutations = {
JIA(state,value)
{
	//console.log("mutations里的JIA被调用了",state,value)
	state.sum+=value
}
}

在这里插入图片描述
其他方法同理

2.1、完整代码

//Count.vue
<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.dispatch('jia',this.n)
			},
			decrement(){
				this.$store.dispatch('jian',this.n)
			},
			incrementOdd(){
		if(this.$store.state.sum%2)
		{
			this.$store.dispatch('jia',this.n)
		}
			},
			incrementWait(){
				setTimeout(() => {
					this.$store.dispatch('jia',this.n)
				}, 2000);
		
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>


//store/main.js
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	jia:function(context,value){
		//console.log("action中的加被调用了",context,value)
		context.commit('JIA',value)
	},
	jian:function(context,value){
		context.commit("JIAN",value)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
JIA(state,value)
{
	//console.log("mutations里的JIA被调用了",state,value)
	state.sum+=value
},
JIAN:function(state,value){
	state.sum-=value

}
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

2.2、优化

  1. 组件中读取vuex中的数据：$store.state.sum
  2. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

//store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	jiaOdd:function(context,value){
		if(context.state.sum%2)
		{
			context.commit("JIA",value)
		}
	},
	jiaAwit:function(context,value){
		setTimeout(() => {
			context.commit('JIA',value)
		}, 1500);
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
JIA(state,value)
{
	//console.log("mutations里的JIA被调用了",state,value)
	state.sum+=value
},
JIAN:function(state,value){
	state.sum-=value

}
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

//Count.vue

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
			this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){	
			this.$store.dispatch('jiaAwit',this.n)
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

3、getters

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
  2. 在store.js中追加getters配置
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions = {
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了')
		state.sum -= value
	}
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}
//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})
  1. 组件中读取数据：$store.getters.bigSum

4、四个map方法

4.1、mapState

  • 借助mapState生成计算属性，从state中读取数据。（对象写法）
 ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
  • 借助mapState生成计算属性，从state中读取数据。（数组写法）
...mapState(['sum','school','subject']),

//App.vue
		computed:{
			//靠程序员自己亲自去写计算属性
			/* sum(){
				return this.$store.state.sum
			},
			school(){
				return this.$store.state.school
			},
			subject(){
				return this.$store.state.subject
			}, */

			//借助mapState生成计算属性，从state中读取数据。（对象写法）
			//解构
			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
			//解构
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState(['sum','school','subject']),

		}

4.2、mapGetters

mapGetters方法：用于帮助我们映射getters中的数据为计算属性

//App.vue
		computed:{
			/* bigSum(){
				return this.$store.getters.bigSum
			}, */

			//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
			// ...mapGetters({bigSum:'bigSum'})
			
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters(['bigSum'])

		}

4.3、mapActions方法

  • 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
...mapMutations({increment:'JIA',decrement:'JIAN'}),
  • 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
 ...mapMutations(['JIA','JIAN']),

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和放大10倍为：{{bigSum}}</h3>
		<h3>我在{{school}}，学习{{subject}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			//借助mapState生成计算属性，从state中读取数据。（对象写法）
			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState(['sum','school','subject']),

			/* ******************************************************************** */

			//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
			// ...mapGetters({bigSum:'bigSum'})
			
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters(['bigSum'])

		},
		methods: {
			//程序员亲自写方法
			/* increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			}, */

			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations({increment:'JIA',decrement:'JIAN'}),

			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
			// ...mapMutations(['JIA','JIAN']),
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			}, 
		},
		mounted() {
			const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
			console.log(x)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

4.4、mapMutations

用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和放大10倍为：{{bigSum}}</h3>
		<h3>我在{{school}}，学习{{subject}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			//借助mapState生成计算属性，从state中读取数据。（对象写法）
			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState(['sum','school','subject']),


			//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
			// ...mapGetters({bigSum:'bigSum'})
			
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters(['bigSum'])

		},
		methods: {
			 increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			}, 
			//程序员亲自写方法
			/* incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			}, */

			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
			// ...mapActions(['jiaOdd','jiaWait'])
		},
		mounted() {
			const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
			console.log(x)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象如点击事件。

<button @click="increment(n)">+</button>

5、多组件共享数据

nanoid库和uuid库一样都可以生成uuid，但是nanoid相比uuid要更轻量级
可以用nanoid来生成id

//App.vue
<template>
  <div class="container">
	<Count/>
	<hr>
	<Person/>
  </div>
</template>

<script>
import Count from './components/Count'
import Person from './components/Person.vue'
export default {
name:'App',
components:{
	Count,
Person
}
}
</script>

<style>
.container{
	display: flex;
	justify-content: space-around;
}
img{
	width: 100%;
}
</style>

//store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	jiaOdd:function(context,value){
		if(context.state.sum%2)
		{
			context.commit("JIA",value)
		}
	},
	jiaAwit:function(context,value){
		setTimeout(() => {
			context.commit('JIA',value)
		}, 1500);
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
JIA(state,value)
{
	//console.log("mutations里的JIA被调用了",state,value)
	state.sum+=value
},
JIAN:function(state,value){
	state.sum-=value

},
ADDPER:function(state,obj){
	state.personList.unshift(obj);
}
}
//准备state——用于存储数据
const state = {
	sum:0 ,//当前的和
	personList:[
		{
			id:'001',
			name:"张三"
		},
		{
			id:'002',
			name:"李四"
		}
	]
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

//Count.vue
<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
import {mapState} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			// sum(){
			// 	return this.$store.state.sum
			// }
			...mapState(['sum'])
		},
		methods: {
			increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
			this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){	
			this.$store.dispatch('jiaAwit',this.n)
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>


//Person.vue
<template>
  <div>
      <input type="text" placeholder="请输入名字" v-model="name">
      <button @click="add">添加</button>
      <ul>
        <li v-for="p in $store.state.personList" :key="p.id">{{p}}</li>
      </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid';
export default {
    name:"Person",
    data(){
        return{
            name:''
        }
    },
    methods:{
        add:function(){
            const personObj={id:nanoid(),neme:this.name};
            this.name='';
           this.$store.commit('ADDPER',personObj);
        }
    }

}
</script>

<style>

</style>

6、模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确。
  2. 修改store.js
   const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })
  1. 开启命名空间后，组件中读取state数据：
   //方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取：
   ...mapState('countAbout',['sum','school','subject']),
  1. 开启命名空间后，组件中读取getters数据：
   //方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取：
   ...mapGetters('countAbout',['bigSum'])
  1. 开启命名空间后，组件中调用dispatch
   //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  1. 开启命名空间后，组件中调用commit
   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
真的不想起床
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex知识整理
斗师——Ace
11-17 153
1. 官网：https://vuex.vuejs.org/zh/guide/。 2.应用场景：如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。 3. 下载：n...
Vuex知识点梳理
空寻的博客
08-09 289
Vuex 1.概念 ​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2.何时使用？ ​ 多个组件需要共享数据时 3.搭建vuex环境 创建文件：src/store/index.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备acti
Vuex知识梳理
wang_xiao_ye的博客
05-16 152
Vuex
Vuex学习知识点总结
weixin_42233312的博客
07-27 200
Vuex学习 1.Vuex概述 1.1组件之间共享数据的方式 -父向子传值：v-bind属性绑定 -子向父传值：v-on事件绑定 -兄弟组件之间共享数据：EventBus $on 接受数据的那个组件 $emit 发送数据的那个组件 1.2Vuex是什么 -Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间的数据的共享。 1.3使用Vuex统一管理状态的好处 1.能够在vuex中集中管理共享的数据，易于开发和后期维护。 2.能够高效地实现组件之间的数据共享，提高开发效率。 3.存储在vu
vuex的知识梳理
奶茶控
12-21 388
目录 一、概念 二、使用步骤 三、四个map方法的使用---------多组件共享数据 3.1、mapState 方法 3.2、mapGetters 方法 3.3、mapMutations方法 3.4、mapActions方法 四、模块化加命名空间 一、概念 什么是vuex：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信 什么时候使用Vuex： ...
Vuex基础知识整理
weixin_43825727的博客
05-06 163
vuex 1、什么是vuex？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态， 并以相应的规则保证状态以一种可预测的方式发生改变简单来说，就是用来集中管理数据； 2、使用vuex的核心概念 1）store vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。 （1）创建store const store = new Vuex.Store({...})
Vuex核心知识整理
xiaoxie_life_study
02-17 791
Vuex核心知识整理：1 搭建vuex环境；2 求和案例；3 getters 配置项；4 mapState 和 mapGetters；5mapMutations 和 mapActions；6 Vuex 模块化
Vuex知识点整理（面试）
hanjuyuan的博客
08-27 393
1.什么是vuex？ vuex是一个组件数据共享的容器，我们的组件的传值有“父传子--自定义属性”，“子传父--自定义事件”，还有夸组件（兄弟组件），但是也会存在没有关系的组件之间来进行传递，那么怎么解决呢？ 此时就可以通过vuex来传递。 2.vuex的初始化： 我们在创建脚手架的时候，选择vuex， ...
vuex:vuex知识总结
03-27
威克斯项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build运行测试npm run test整理和修复文件npm run lint自定义配置请参阅。
vuex进阶知识点巩固
08-27
本片文章是小编在网上整理的关于VUEX进阶的相关知识点内容，对此有兴趣的朋友可以跟着学习参考下。
vuex vue简单使用知识点总结
10-16
在本篇文章里小编给大家整理了关于vuex vue简单使用知识点总结，有需要的朋友们可以参考下。
Vue+Vuex实现自动登录的知识点详解
10-15
在本篇文章里小编给大家整理的是关于Vue+Vuex实现自动登录的知识点详解，需要的朋友们可以学习下。
mastering-vuex
04-04
4-Vue路由器基础知识 5-动态路线和历史记录模式 6-单个文件组件 7-全局组件 8-插槽 9-使用Axios进行API调用 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复...
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 682
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
小程序的数据驱动和vue的双向绑定有何异同
最新发布
qingdouxiaohua的博客
06-02 552
小程序的数据驱动和Vue的双向绑定在概念和应用上既有相似之处，也存在明显的差异。
vue3 vue-draggable-next 实现拖拽穿梭框效果
游九尘的博客
06-01 396
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
vue-标签选择
zw899004的专栏
06-01 717
vue-标签选择
vue 笔记03
m0_47045804的博客
05-30 955
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
vue3中vuex知识
09-15
因此，对于Vuex的知识，可以先了解主要的使用方法，在后续项目中需要用到的时候再深入学习。主要需要知道Vuex的使用方式，如何维护state，如何构建store以及如何实现组件之间的交互等。同时也要了解Pinia这个库，它...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值