vuex 状态管理 入门
2024-10-08 06:04:46
vuex是什么
是一个对 数据状态实现集中式管理 的工具。可以解决组件之间传递的问题
多组件共享状态（变量），有一个数据好多组件都用
组件数大于2，任何一个组件修改其他组件都要改变
实现组件通信
Store
每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
使用
- 安装
npm install vuex
- 创建store/index.js
a. vuex
impote vuex form 'vuex'
b. 创建store对象
const store = new Vuex.Store({
states:{
//全局变量
},
})
c. 导出store
export dafault store
d. 在main.js中引入
import store from "./store"
new Vue({
store
})
基本使用
- 获取全局状态值 this.$store.state.xxxx
- 修改全局状态
- 同步：mutations
- 异步 先action 再mutation
五大属性
1.state 数据
- 项目中共享的数据
state:{
name:'韩梅梅',
age:'16',
sex:0,
phone:1231312313
},
2.mutations : 同步方法
//修改state里数据的唯一途径
mutations:{
changeStateName(state,params){
// state 全局状态数据
//params 通过commit 触发传递的方法
console.log('修改state数据',state,params)
state.name=params.us
}
}
this.$store.commit("")//触发mutations的某一个方法，第一个参数是名字
3.actions ：异步方法
- 当vuex中出现异步，应该放到actions中，非必须
- 可以将异步代码封装，统一管理异步
// 异步存放的地方 请求成功后发起 commit
actions:{
getNetName(context,params){
console.log('触发actions',arguments)
let {commit}=context
setTimeout(()=>{
let name='来自星星的名字'
commit('changeStateName',{us:name,ps:123})
},500)
}
}
this.$store.dispatch("") //发送一个请求，第二个参数是一个对象
4.getters : 派生属性
- 对全局状态下的数据进行管理，类似于vue中的计算属性
- 与state中数据进行关联，state数据改变，getter就会执行
// 做数据的处理
getters:{
doubleName(state){
return state.name+state.name
}
}
5.modules ： 模块化
- state会被添加模块名字，其他的不会被加模块名
- namespace:true 命名空间，防止不同的模块有相同的名字
moudles:{
'a':{
state:{name:"zhangsan"}，
getters：{}
},
'b':{
state：{age:18}
}
}
//不分模块写法：store.state.name
//分模块写法：store.a(模块名).state.name
a.js b.js 在index.js中引用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import A from './a'
import B from './b'
let store = new Vuex.Store({
modules:{A,B}
})
辅助函数
值类型：state，getters
可以通过辅助函数将值映射到内部的计算属性中
函数类型：actions，mutation；
通过辅助函数将函数映射到组件内部的方法里
映射：map ---------> mapState 、 mapGetters、 mapActions 、 mapMutations
使用
- mapState
import {mapState} from "vuex"
export default{
...mapState(['name'])
}
//页面中的
this.$store.state.name
//可以写成
name
- mapGetters
import {mapGetters} from "vuex"
export default{
...mapGetters(['name'])
}
//页面中的
this.$store.getters.name
//可以写成
name
- mapMutations
import {mapMutations} from "vuex"
export default{
...mapMutations(['name'])
changeName(){
this.name({'name1'})
//this.$store.commit('name')
}
}
//页面中的
this.$store.commit('name')
//可以写成
this.name('')
- mapActions
import {mapActions} from "vuex"
export default{
...mapActions(['name'])
changeName(){
this.name({'name1'})
//this.$store.dispatch('name')
}
}
//页面中的
this.$store.dispatch('name')
//可以写成
this.name('')
最新文章
- HDU1075
- PostgreSQL获取年月日
- mousedos网络批量部署xp
- HDU 1846 Brave Game（简单巴什博弈）
- Centos6的VSFTP服务器配置使用教程
- 【流媒體】live555—VS2008 下live555编译、使用及测试
- foreach -begin -process -end
- information_schema.profiling学习
- WPF学习（6）路由事件
- AIM Tech Round 4 (Div. 2)ABCD
- Python系列之 - 反射
- [FreeRadius2]遇到问题记录
- 有关swiper动态改变数据遇到的坑（不能自动滚动，自动跟新数据，切换不正常）
- realloc 用方法
- Alpha、伪Beta 发布个人感想与体会
- Bootstrap 标签页（Tab）插件
- mysql学习之索引
- Twitter REST API, Streaming API
- 【Java框架型项目从入门到装逼】第十一节 用户新增之把数据传递到后台
- c# using的作用