一.简介:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
二.五个属性:
① 存储状态state
② 获取状态getters
③ 改变状态mutations
④ 异步操作actions
⑤ module
三.简单使用
1.安装:cnpm i vuex --save
2.在src目录下新建store/store.js
3.在main.js中引入store并全局注入
3.store.js中
4.<组件>.vue中
四.小结
1.vue store存储commit和dispatch区别
dispatch:含有异步操作(向后台发送请求获取数据)
写法:this.
s
t
o
r
e
.
d
i
s
p
a
t
c
h
(
′
m
u
t
a
t
i
o
n
s
方
法
名
′
,
值
)
c
o
m
m
i
t
:
同
步
操
作
写
法
:
t
h
i
s
.
store.dispatch('mutations方法名',值) commit:同步操作 写法:this.
store.dispatch(′mutations方法名′,值)commit:同步操作写法:this.store.commit(‘mutations方法名’,值)
2.vuex中的modle
①功能:让每一个模块拥有自己的state,getters,mutation,action,使得结构非常清晰,方便管理
②写法:
③模块内部的数据
(1)内部state,模块内部state是局部的,例car.js模块state中的list数据,通过this.
s
t
o
r
e
.
s
t
a
t
e
.
c
a
r
.
l
i
s
t
获
取
(
2
)
内
部
g
e
t
t
e
r
s
,
m
u
t
a
t
i
o
n
s
,
a
c
t
i
o
n
s
仍
然
注
册
在
全
局
命
名
空
间
内
,
这
是
为
了
多
模
块
可
以
同
时
响
应
同
一
m
u
t
a
t
i
o
n
s
,
通
过
t
h
i
s
.
store.state.car.list获取 (2)内部getters,mutations,actions仍然注册在全局命名空间内,这是为了多模块可以同时响应同一mutations,通过this.
store.state.car.list获取(2)内部getters,mutations,actions仍然注册在全局命名空间内,这是为了多模块可以同时响应同一mutations,通过this.store.carGetters就可以拿到
Vuex
最新推荐文章于 2022-10-31 00:01:58 发布