Vuex状态管理在多组件同步中应用.pdfVIP

Vuex

状态树｜end

▁of▁sentence｜

干啥用的?｜end▁of▁sentence｜

当状态修改时，Vue会所有和这个状态相关的组件进行更新，实现多组件之间状态的同

步。｜end▁of▁sentence｜

当多个组件都依赖同一个数据时，那么这个数据我们就需要使用

Vuex

定义成一个状态来操作。比

如，页面中可能有多个组件都依赖“是否登录”来决定组件的内容，这时就应该把是否登录定义成一个

状态来进行管理。｜end▁of▁sentence｜

比两个组件，都要依赖于

name

的值：（当未登录时显示红色，登录时显示）｜end▁of▁sentence｜

组件1：

//

组件1temtedivspan

v‑if=name==游客/spanspan

v‑else{{name}}

,

button

@click=logout/button/span/div/temtescriptexport

default

{

data:function()

{

return

{

name:

}

},

mounted:function(){

let

name

=

localStorage.getItem(name)

if(｜end▁of▁se