Vuex笔记

最新推荐文章于 2024-07-30 23:06:43 发布

qq_40605334

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量108

点赞数

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_40605334/article/details/127015876

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、什么是vuex

状态管理模式
属性：
state 类似于data 存放公共数据
getters 类似于computed
mutations 类似于methods
action 提交mutations
modules 细分上面四个属性，更好管理

二、如何使用

//vuex.js
state:{
	str:'aaa',
	num:1
},
getters:{
  changeStr(state){
    return state.str+'b'
  }
},
mutations:{
	btn(state,c){
 		console.log(c)  //aa
 	}，
 	add(state){
		state.num++
	}
},
actions:{
	btns({commit}){
	  setTimeout(()=>{
			commit('add')
		},1000)
	}
}
  
//组件
<div>
	{{str}}   
	{{changeStr}}
	//mutations
	 <button @click="btn("aa")"></button>
	  //actions
	<button @click="btns("aaa")"></button>  
</div>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
computed:{
	...mapState(['str']),
	...mapGetters(['changeStr'])
},
methods:{
	...mapMutations(['btn']),
	...mapActions(['btns'])
}