vuex學習總結

vuex是針對於vue開發的狀態管理模式。採用的是集中式儲存管理應用的所有元件的狀態，並以響應的規則保證狀態以一種可**的方式發生變化。它也是類似於flux，redux和the elm architecture

vuex和單純的全域性物件有兩個不同點：

1、vuex的狀態儲存是響應式的。

2、不能直接改變store中的狀態。

npm install vuex

或yarn add vuex

// 建立store檔案
// 在mian.js中
import vue from
'vue'
import vuex from
'vuex'
import store from
'./store'
vue.
use(vuex)
newvue()
.$mount
()

主要是儲存預設的全域性的資料,通過store選項，提供了一種機制將狀態從根部元件「注入」到每個子元件中。

import vue from
'vue'
import vuex from
'vuex'
vue.
use(vuex)
export
default
newvuex.store(}
)


第一種方法
}<
/span>
第二種方法
}<
/span>
<
/div>
<
/template>
import
from
'vuex'
export
default},
compunted:
}<
/script>

主要是修改state中的資料，雖然可以直接在子元件的methods中直接修改，但是是不合法的，所以要在全域性的mutations中修改

// state是全域性的state
add(state)
,// step 是元件傳過來的引數
addn
(state,step)

methods:,}
或}<
/div>
"add"
>+1
<
/button>
<
!--傳入引數--
>
"addn(3)"
>+n
<
/button>
<
/template>
methods：
}

action類似於mutation，不同在於

addnasync
(context, step)
,1000
)}

this
.$store.
dispatch
('addnasync',5
)// 當然也可以利用
...mapactions([
'addnasync'
])

就是從store中的state中派生出一些狀態，也就是對state中的資料進行加工處理，同時不會改變原來的state的值

-store.js

getters:
}

//通過屬性訪問
this
.$store.getters.shownum
或通過輔助函式
...mapgetters([
'shownum'
])

在上面常用的輔助函式

mapstate,mapmutations,mapactions,mapgetters

博主個人小部落格：嘿嘿

Vuex 學習總結

好在之前接觸過 flux，對於理解 vuex 還是很有幫助的。react 學到一半，後來因為太忙，就放棄了，現在也差不多都忘記了。不過感覺 vuex 還是跟 flux 還是有點區別的。對於很多新手來說，只是閱讀文件是不好消化，我的建議是看看 vuex 的例項，通過研究例項來學習vuex。這樣就會好理...

Vuex 學習總結

Vuex學習總結 Getters（4）

vuex例項的getters相當於計算屬性，getters的結果根據其依賴關係進行快取，並且在其依賴發生更改時才重新計算。getters將vuex例項的state作為第乙個引數。store index.js import vue from vue import vuex from vuex vue....

vuex學習總結

Vuex 學習總結

Vuex 學習總結

Vuex學習總結 Getters（4）

相關推薦