vuex最詳細完整的使用用法
為什麼使用vuex？
vuex主要是是做資料互動，父子元件傳值可以很容易辦到，但是兄弟元件間傳值（兄弟元件下又有父子元件），或者大型spa單頁面框架專案，頁面多並且一層巢狀一層的傳值，異常麻煩，用vuex來維護共有的狀態或資料會顯得得心應手。
需求：兩個元件A和B，vuex維護的公共資料是 餐館的名稱 resturantName，預設餐館名稱是 飛歌餐館，那麼現在A和B頁面顯示的就是飛歌餐館。如果A修改餐館名稱 為 A餐館，則B頁面顯示的將會是 A餐館，反之B修改同理。這就是vuex維護公共狀態或資料的魅力，在一個地方修改了資料，在這個專案的其他頁面都會變成這個資料
①使用 vue-cli腳手架工具建立一個工程專案，工程目錄，建立元件A和元件B路由如下：
路由如下：
import
Vue
from
‘
vue
’
import
Router
from
‘
vue
-
router
’
import
componentsA
from
‘
@
/
components
/
componentsA
’
import
componentsB
from
‘
@
/
components
/
componentsB
’
Vue
。
use
（
Router
）
export
default
new
Router
（
{
mode
：
‘
history
’，
routes
：
［
{
path
：
‘/’
，
name
：
‘
componentsA
’，
component
：
componentsA
}
，
{
path
：
‘
/
componentsA
’，
name
：
‘
componentsA
’，
component
：
componentsA
}
，
{
path
：
‘
/
componentsB
’，
name
：
‘
componentsB
’，
component
：
componentsB
}
］
}
）
app。vue
<
template
>
<
div
id
=
“app”
>
<
router
-
view
/>
div
>
template
>
<
script
>
export
default
{
name
：
‘
App
’
}
script
>
<
style
>
#
app
{
font
-
family
：
‘
Avenir
’，
Helvetica
，
Arial
，
sans
-
serif
；
-
webkit
-
font
-
smoothing
：
antialiased
；
-
moz
-
osx
-
font
-
smoothing
：
grayscale
；
text
-
align
：
center
；
color
：
#
2
c3e50
；
margin
-
top
：
60
px
；
}
style
>
②開始使用vuex，新建一個 sotre資料夾，分開維護 actions mutations getters
②在store/index。js檔案中新建vuex 的store例項
*as的意思是 匯入這個檔案裡面的所有內容，就不用一個個例項來匯入了。
import
Vue
from
‘
vue
’
import
Vuex
from
‘
vuex
’
import
*
as
getters
from
‘。
/
getters
’
//
匯入響應的模組
，
*
相當於引入了這個元件下所有匯出的事例
import
*
as
actions
from
‘。
/
actions
’
import
*
as
mutations
from
‘。
/
mutations
’
Vue
。
use
（
Vuex
）
//
首先宣告一個需要全域性維護的狀態
state
，
比如
我這裡舉例的resturantName
const
state
=
{
resturantName
：
‘
飛歌餐館
’
//
預設值
//
id
：
xxx
如果還有全域性狀態也可以在這裡新增
//
name
：
xxx
}
//
註冊上面引入的各大模組
const
store
=
new
Vuex
。
Store
（
{
state
，
//
共同維護的一個狀態
，
state裡面可以是很多個全域性狀態
getters
，
//
獲取資料並渲染
actions
，
//
資料的非同步操作
mutations
//
處理資料的唯一途徑
，
state的改變或賦值只能在這裡
}
）
export
default
store
//
匯出store並在
main
。
js中引用註冊
。
③actions
//
給action註冊事件處理函式
。
當這個函式被觸發時候
，
將狀態提交到mutations中處理
export
function
modifyAName
（
{
commit
}
，
name
）
{
//
commit
提交
；
name即為點選後傳遞過來的引數
，
此時是
‘
A餐館
’
return
commit
（‘
modifyAName
’，
name
）
}
export
function
modifyBName
（
{
commit
}
，
name
）
{
return
commit
（‘
modifyBName
’，
name
）
}
//
ES6精簡寫法
//
export
const
modifyAName
=
（
{
commit
}
，
name
）
=>
commit
（‘
modifyAName
’，
name
）
④mutations
//
提交
mutations是更改Vuex狀態的唯一合法方法
export
const
modifyAName
=
（
state
，
name
）
=>
{
//
A元件點選更改餐館名稱為
A餐館
state
。
resturantName
=
name
//
把方法傳遞過來的引數
，
賦值給state中的resturantName
}
export
const
modifyBName
=
（
state
，
name
）
=>
{
//
B元件點選更改餐館名稱為
B餐館
state
。
resturantName
=
name
}
⑤getters
//
獲取最終的狀態資訊
export
const
resturantName
=
state
=>
state
。
resturantName
⑥在main。js中匯入 store例項
//
The
Vue
build
version
to
load
with
the
`
import
`
command
//
（
runtime
-
only
or
standalone
）
has
been
set
in
webpack
。
base
。
conf
with
an
alias
。
import
Vue
from
‘
vue
’
import
App
from
‘。
/
App
’
import
router
from
‘。
/
router
’
import
store
from
‘。
/
store
’
Vue
。
config
。
productionTip
=
false
/*
eslint
-
disable
no
-
new
*/
new
Vue
（
{
el
：
‘
#
app
’，
router
，
store
，
//
這樣就能全域性使用vuex了
components
：
{
App
}
，
template
：
‘
<
App
/>
’
}
）
④在元件A中，定義點選事件，點選 修改 餐館的名稱，並把餐館的名稱在事件中用引數進行傳遞。
。。。mapactions 和 。。。mapgetters都是vuex提供的語法糖，在底層已經封裝好了，拿來就能用，簡化了很多操作。
其中。。。mapActions（［‘clickAFn’］） 相當於this。$store。dispatch（‘clickAFn’，{引數}），mapActions中只需要指定方法名即可，引數省略。
。。。mapGetters（［‘resturantName’］）相當於this。$store。getters。resturantName
<
template
>
<
div
class
=
“componentsA”
>
<
P
class
=
“title”
>
元件A
P
>
<
P
class
=
“titleName”
>
餐館名稱
：{{
resturantName
}}
P
>
<
div
>
<
！
—— 點選修改 為 A 餐館 ——>
<
button
class
=
“btn”
@
click
=
“modifyAName（‘A餐館’）”
>
修改為A餐館
button
>
div
>
<
div
class
=
“marTop”
>
<
button
class
=
“btn”
@
click
=
“trunToB”
>
跳轉到B頁面
button
>
div
>
div
>
template
>
<
script
>
import
{
mapActions
，
mapGetters
}
from
‘
vuex
’
export
default
{
name
：
‘
A
’，
data
（）
{
return
{
}
}
，
methods
：
{
。。。
mapActions
（
//
語法糖
［
‘
modifyAName
’
］
//
相當於this
。
$
store
。
dispatch
（‘
modifyName
’），
提交這個方法
），
trunToB
（）
{
this
。
$
router
。
push
（
{
path
：
‘
/
componentsB
’
}
）
//
路由跳轉到B
}
}
，
computed
：
{
。。。
mapGetters
（
［
‘
resturantName
’
］
）
//
動態計算屬性
，
相當於this
。
$
store
。
getters
。
resturantName
}
}
script
>
<
！
—— Add “scoped” attribute to limit CSS to this component only ——>
<
style
scoped
>
。
title
，。
titleName
{
color
：
blue
；
font
-
size
：
20
px
；
}
。
btn
{
width
：
160
px
；
height
：
40
px
；
background
-
color
：
blue
；
border
：
none
；
outline
：
none
；
color
：
#
ffffff
；
border
-
radius
：
4
px
；
}
。
marTop
{
margin
-
top
：
20
px
；
}
style
>
B元件同理
<
template
>
<
div
class
=
“componentsB”
>
<
P
class
=
“title”
>
元件B
P
>
<
P
class
=
“titleName”
>
餐館名稱
：{{
resturantName
}}
P
>
<
div
>
<
！
—— 點選修改 為 B 餐館 ——>
<
button
class
=
“btn”
@
click
=
“modifyBName（‘B餐館’）”
>
修改為B餐館
button
>
div
>
<
div
class
=
“marTop”
>
<
button
class
=
“btn”
@
click
=
“trunToA”
>
跳轉到A頁面
button
>
div
>
div
>
template
>
<
script
>
import
{
mapActions
，
mapGetters
}
from
‘
vuex
’
export
default
{
name
：
‘
B
’，
data
（）
{
return
{
}
}
，
methods
：
{
。。。
mapActions
（
//
語法糖
［
‘
modifyBName
’
］
//
相當於this
。
$
store
。
dispatch
（‘
modifyName
’），
提交這個方法
），
trunToA
（）
{
this
。
$
router
。
push
（
{
path
：
‘
/
componentsA
’
}
）
//
路由跳轉到A
}
}
，
computed
：
{
。。。
mapGetters
（
［
‘
resturantName
’
］
）
//
動態計算屬性
，
相當於this
。
$
store
。
getters
。
resturantName
}
}
script
>
<
！
—— Add “scoped” attribute to limit CSS to this component only ——>
<
style
scoped
>
。
title
，。
titleName
{
color
：
red
；
font
-
size
：
20
px
；
}
。
btn
{
width
：
160
px
；
height
：
40
px
；
background
-
color
：
red
；
border
：
none
；
outline
：
none
；
color
：
#
ffffff
；
border
-
radius
：
4
px
；
}
。
marTop
{
margin
-
top
：
20
px
；
}
style
>
最後：本文完全手打，如需轉載請註明出處，謝謝，如果不明白的地方歡迎給我留言哦。
github倉庫地址：
https：//
github。com/byla678/vuex
demo。git
作者：飛歌Fly
原文：vuex最詳細完整的使用用法 - qq_35430000的部落格 - CSDN部落格
版權宣告：本文為博主原創文章，轉載請附上博文連結！
