以下內容可直接用編輯器開啟檢視
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
vuex的使用<
/title>
<
/head>
1.元件之間共享資料的方式:
父元件向子元件傳值:v-bind屬性繫結
子元件向父元件傳值:v-on事件繫結
兄弟元件之間的資料共享:eventbus事件中心
2.vuex:實現元件全域性狀態資料管理的一種機制,可以方便實現各個元件之間的資料共享,儲存在vuex中的資料都是響應式的
3.vuex的基本使用
匯入:import vuex from
'vuex'
安裝:vue.
use(vuex)
建立vuex例項物件:
const store =
newvuex.store(}
) 將例項掛載vue例項中:
newvue()
4.vuex的核心概念:
state
(唯一公共資料源)
,mutations
(只有它有權利改變state的資料)
,actions
(非同步的操作)
,getters
(用於對state中的資料進行加工處理形成新的資料,不會直接修改state的資料,只起到包裝作用,類似vue的計算屬性)
export
default
newvuex.store(,
mutations:},
actions:
,1000)}
},getters:}}
) 在元件中訪問state中的資料:
this
.$store.state.
全域性資料名稱
(a);注意如果用
}this可以省略
mutations中的資料說明add為事件名,state為固定寫法表示state資料來源物件,step為接受資料的形參;
在元件中methods的事件中使用:
this
.$store.
commit
('mutations中對應的事件名例add',8
)觸發,
8為傳遞過去的資料
actions中的資料說明addasync為非同步事件名,context為固定寫法表示mutations事件物件,context.commit固定寫法
表示查詢mutations某個事件物件;step為接受資料的形參
在元件中methods的事件中使用:
this
.$store.
dispatch
('非同步函式名addasync',8
)來觸發,
8為傳遞過去的資料
getters中的資料說明show為事件說明,state為固定寫法表示資料物件,state中的資料發生變化對應 getters中相應包裝資料
也會發生變化
在元件中使用:
this
.$store.getters.
名稱(show)
,注意如果用
}this可以省略
-->
<
/body>
<
/html>
state物件為vuex的唯一的公共資料源;
mutations只有它有權利可以改變vuex的公共資料;
actions一般處理非同步的操作,想改變公共資料,需要借助mutations來實現;
getters類似vue的計算屬性,不能直接改變公共資料,只對公共資料起到包裝的作用,而公共資料的變化也會影響其包裝出來的資料;
在vue元件中事件呼叫的時候是可以傳遞引數的,對應vuex中使用第二個形參接收
結語:如有錯誤之處,望請不吝賜教
Vuex的核心概念
state 提供唯一的公共資料源，所有共享的資料都要統一放到 store 的 state 中進行儲存。建立store資料來源，提供唯一公共資料 const store newvuex.store 1.1 元件訪問 state 中資料的第一種方式 this store.state.全域性資料名稱1.2...
Vuex核心概念Mutation Action
newvuex.store mutations commit increment mutations commit increment 10 mutations commit increment commit 當需要在物件上新增新屬性時，你應該 以新物件替換老物件。例如，利用 stage 3 的物件...
vuex的五個核心概念簡述
vuex是vue.js應用設計的狀態管理架構,通俗理解,可以想象就是vue元件中的data 1.state 基本資料來源 簡單的state const store newvuex.store 2.mutatios 提交更改資料的方法 同步 儲存 第乙個引數是vuex中對應mutation的方法,第二...