0
点赞
收藏
分享

微信扫一扫

vuex状态管理

进击的铁雾 2022-02-09 阅读 99

1.什么是vuex?

专门在vue中实现集中式状态(数据)管理的一个Vue插件,对vue中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,适用于任意组件间的通信

2.什么时候使用vuex?

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

3.vuex的使用

1.安装vuex

2.js入口文件中引入store实例
src/main.js

 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
 
 //创建vue实例
 new Vue({
 	el:'#app',
 	render:h=>h(App),
 	store
 })

3.引入vuex并使用
src/store/index.js

  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)//使用
  
  export default new Vuex.Store({
  	state:{
  		sum:0
  	},
  	actions:{},
  	mutations : {
  		ADD(state,value){
  			state.sum+=value
  		}
  	},
  	getters:{},
  })

4.使用:

  1. store: 读取数据
    第一种方式:this.$store.state.sum
    第二种方式:借助mapState生成计算属性,从state中映射数据。使用的时候直接插值语法{{sum}}
 import {mapState} from 'vuex'
 computed:{
 	...mapState({sum:'sum'})//对象写法
 	...mapState(['sum'])//数组写法(简写)
 }
  1. commit:修改数据
    Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
    第一种方式:
methods:{
	increment(value){
 		this.$store.commit('ADD',3)
 	}
}

第二种方式:参数必须在调用时传递(实参)

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

import {mapMutations} from 'vuex'
export default{
	data(){
		return{
			n:2
		}
	},
	methods:{
	//借助mapMutations生成对应的方法
		...mapMutaions({increment:'ADD'}),//对象写法
		...mapMutaions(['ADD']),//数组写法,此时调用函数时绑定函数为ADD,即<button @click="ADD(n)">加+</button>
 	}
}
 

3.Action 类似于mutation,不同在于:

  1. Action提交的是mutation,而不是直接变更状态
  2. Action可以包含任意异步操作
    使用:
    1.store中定义actions
mutations:{
	ADD(state,value){
		state.sum+=value
	}
},
actions: {
  addWait (context,value) {
    setTimeout(()=>{
    	context.commit('ADD',value)
    },1000)
  }
}

2.触发:
第一种方式:this.$store.dispatch('action中的方法名',数据)
第二种方式:参数必须在调用时传递(实参)

 <button @click="incrementOdd(5)">等一秒钟再加+</button>

 import {mapActions} from 'vuex'
 methods:{
 	...mapActions({incrementOdd:'addWait'}),//对象写法
 	...mapMutaions(['addWait']),//数组写法,此时调用函数时绑定函数为ADD,即<button @click="addWait(5)">等等再加+</button>
 }

4.Getters store的计算属性,用于将state中的数据进行加工

  1. 加工数据
 getters:{
 	bigSum(state,getters){
 		return state.sum*10
 	}
 }
  1. 使用数据:
    第一种方式: <span>乘积结果为:{{$store.getters.bigSum}}</span>
    第二种方式:借助mapGetter生成计算属性,从getters中映射数据。
 import {mapGetters} from 'vuex'
 computed:{
 	...mapGetters({bigSum:'bigSum'})//对象写法
 	...mapGetters(['bigSum'])//数组写法(简写)
 }

以上所有的映射函数mapState mapMutations mapActions mapGetters在多数据或状态时使用在项目中能帮助我们实现快速简便开发

举报

相关推荐

0 条评论