提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
vuex 的理解
首先我们先来说一下vuex是什么?vuex其实就是vue官方提供给我们的的一个状态管理工具,管理项目中的公共数据,能够在所有的组件中使用。
vuex一共有五大核心
state 存放变量的,存放公共数据的地方,通过 this.
s
t
o
r
e
.
s
t
a
t
e
.
x
x
x
调
用
m
u
t
a
t
i
o
n
s
修
改
s
t
a
t
e
的
状
态
,
只
有
这
里
能
修
改
,
通
过
t
h
i
s
.
store.state.xxx调用 mutations 修改state的状态,只有这里能修改,通过this.
store.state.xxx调用mutations修改state的状态,只有这里能修改,通过this.store.commit调用
getters 计算属性,计算变量的值 通过this.
s
t
o
r
e
.
g
e
t
t
e
r
s
调
用
a
c
t
i
o
n
s
执
行
异
步
操
作
的
地
方
通
过
t
h
i
s
.
store.getters调用 actions 执行异步操作的地方 通过this.
store.getters调用actions执行异步操作的地方通过this.store.dispatch调用
modules 模块化,用来拆分模块的
vuex的缺点
vuex 缺点就是刷新数据会丢失,我们可以保存本地存储或者安装vuex的持久化插件,vuex-persist去实现自动本地存储
vuex 的执行机制
在项目当中如果改变state 的状态,我们一般是在组件里面调用 this.$store.dispatch方式来触发actions里面的方法,在actions里面的方法通过commit来调用mutations里面定义的方法来改变state,同时这也是vuex的执行机制
怎么开启严格模式?
strict:true,跟state同级的地方设置这个属性,开启完严格模式后,如果不是通过mutation修改的state就会报错,strict严格模式只适合开启在开发环境下。
modules
是把仓库的数据分模块管理
每个模块里又有四个核心 state ,mutations ,getters,actions,
然后引入仓库,并且在modules 下注册模块,在定义的modules里面开启一个命名,namespaced:true
完整的vuex
⾯试官您好,接下来我先给您介绍⼀下什么是vuex? 所谓的vuex其实就是vue官⽅给我们提供的⼀个状态管理⼯具,通过vuex我
们可以组件之间数据共享的问题. vuex⼀共有5⼤核⼼,分别是state,⾥⾯保存的是状态,也可以理解为是数组, 接下来是getters,
他们⽤来获取state⾥⾯的状态,并且可以对state的数据进⾏处理之后在返回,有点类似于vue的计算属性, 接下来还有mutations,
他的作⽤主要是⽤来修改state⾥⾯的数据,不过在mutations⾥⾯只能进⾏同步的操作,还有actions,这个actions也可以去改变
state的状态,不过在actions⾥⾯定义的⽅法可以进⾏异步操作,最后⼀个是modules,如果当我们的项⽬⽐较⼤的时候,那么保存
的状态也会增加,如果都写到index.js⽂件⾥⾯,⽂件的内容就会变得特别臃肿,后期难以维护,所以我们可是使⽤modules进⾏模
块化的处理,将多个状态抽离到对应js⽂件⾥⾯,最后在modules进⾏合并,这样后期就⽅便维护了.
接下来我在介绍⼀下在组件⾥⾯如何调⽤vuex⾥⾯的属性和⽅法,如果我们要获取state⾥⾯的状态,我们可以通过this.
来进行获取 如果要调用 里面的方法 我们可以通过 来进行调用 如果要调用 里面的方法我们需要使用
store.commit来触发,如果调⽤actions⾥⾯的⽅法,我们⼀般通过this.
s
t
o
r
e
.
d
i
s
p
a
c
t
h
来
进
⾏
触
发
.
除
了
这
种
⽅
式
以
外
,
我
们
还
可
以
通
过
辅
助
函
数
的
⽅
式
来
进
⾏
调
⽤
和
触
发
(
m
a
p
S
t
a
t
e
,
m
a
p
M
u
t
a
t
i
o
n
,
m
a
p
A
c
t
i
o
n
,
m
a
p
G
e
t
t
e
r
)
我
在
项
⽬
当
中
如
果
要
改
变
s
t
a
t
e
的
状
态
,
我
们
⼀
般
是
在
组
件
⾥
⾯
调
⽤
t
h
i
s
.
store.dispacth来进⾏触发. 除了这种⽅式以外,我们还可以 通过辅助函数的⽅式来进⾏调⽤和触发(mapState, mapMutation,mapAction, mapGetter) 我在项⽬当中如果要改变state的状态,我们⼀般是在组件⾥⾯调⽤this.
store.dispacth来进⾏触发.除了这种⽅式以外,我们还可以通过辅助函数的⽅式来进⾏调⽤和触发(mapState,mapMutation,mapAction,mapGetter)我在项⽬当中如果要改变state的状态,我们⼀般是在组件⾥⾯调⽤this.store.dispatch⽅式来触发actions⾥⾯的⽅法,在actions
⾥⾯的⽅法通过commit来调⽤mutations⾥⾯定义的⽅法来改变state,同时这也是vuex的执⾏机制
不过vuex也有⼀些弊端,⽐如浏览器刷新的时候,vuex的数据会丢失,我们⼀般结合本地存储来解决,当我们在mutations⾥⾯改变
state的时候在通过localStorage或者sessionStorage存储到本地,然后在state的状态的属性值那块写⼀个三元表达式,如果本地存
在数据的话则读取本地存储的数据,否则就赋值为null
在项⽬当中我⼀般使⽤vuex会保存⽤户信息和token以及其他的⼀些状态. 以上就是我对vuex的理解
总结
提示:文章仅供参考:
有自己理解的意思说出来,有时候太官方的东西,不一定好记。