vuex基本使用

1.首先要在store/index.js檔案配置vuex

vuex基本有state：用來定義共享狀態，

actions：實現非同步請求操作，

mutations：存放了所有更改狀態的方法，

getters ： 類似於計算屬性，根據vuex的state狀態派發乙個新的狀態出來.

//自己封裝的ajax請求

vue.

use(vuex)

let store =

newvuex.store(,

actions:})

.then

(res=>)}

},mutations:

,hide

(state)

,setcinemalist

(state,data)},

getters:}}

)export

default store2.在頁面元件中中觸發

觸發actions用this

.$store.
dispatch
("getcinemaactions"
)觸發mutations用this
.$store.
commit
("hide"
)觸發state用this
.$store.state.cinemalist.
splice(0
,5)觸發getters用$store.getters.topdatalist
由於呼叫比較麻煩，採用輔助函式mapstate與mapgetters，mapaction,mapmutations

import

from
"vuex"
computed:
,methods:
,}

for=

"data in topdatalist"
:key=
"data.cinemaid"
>
}<
/li>
computed:
}mounted()
,

可以將vuex的唯一的store進行module拆分,store/index.js

import vue from

'vue'
import vuex from
'vuex'
import cinema from
"./module/cinemamodule"
import tabbar from
"./module/tabbarmodule"
import city from
"./module/citymodule"
vue.
use(vuex)
let store =
newvuex.store(}
)export
default store

const module =

, mutations:}}
export
default module

...

mapmutations
("city",[
"setcityname"])
,...
mapstate
("city",[
"cityname"])
,...
mapmutations
("city",[
"setcityname"
,"setcityid"])
...mapstate
("city",[
"cityname"
,"cityid"])
,

vuex基本使用

使用vuex 1.安裝vuex，搭建手腳架 npm i vuex s2.建立乙個store資料夾，在該資料夾中建立乙個index.js檔案 2.1引入相應的檔案 import vue from vue import vuex from vuex 2.2使用vuex vue.use vuex 3.建立...

Vuex基本使用

vuex，它包括了state,getters,mutations,actions,module,還有語法糖mapstate,mapgetters,mapactions.state vuex中的資料來源，我們需要儲存的資料就儲存在這裡，可以通過this.store.state來獲取資料。getters...

學會VueX基本使用

vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。可以理解為乙個臨時的可共用的乙個物件 我們可以在所有的元件訪問它。我們可以把他理解為乙個倉庫，他裡面儲存著一些工具，而元件是工人，在工人需要倉庫裡的工具的時候，就需要通過一系列的規範操作去獲取它。一般適用於中大型的單頁面應用，如果需要多...