一、概覽

1、Vuex是什麼

專為Vue.js應用程式開發的狀態管理模式（狀態即資料，即資料管理）

採用集中式儲存管理應用的所有元件的狀態

以相應的規則保證狀態以一種可預測的方式發生變化

2、狀態

元件內部狀態：僅在一個元件內使用的狀態( 即data欄位裡的資料，不能共享，只在本元件使用 )

應用級別狀態：多個元件共用的狀態

3、什麼情況下使用Vuex

多個檢視依賴同一狀態

來自不同檢視的行為需要變更同一狀態

二、使用Vuex

1、安裝Vuex模組

npm install vuex --save-dev

2、作為外掛使用

Vuex.use(Vuex)

3、定義一個容器

new Vuex.Store()

4、注入根例項

new vue({

store

})

具體步驟：

1、在src目錄下新建store資料夾，裡面建立index.js檔案

在index.js檔案：

import Vue from 'vue'

import Vuex from 'vuex'

Vuex.use(Vuex)

三、Vuex核心概念

1、store：類似容器，包含應用的大部分狀態

一個頁面只能有一個容器

狀態儲存是響應式的

不能直接改變store中的狀態，唯一途徑顯示地提交mutations

2、State：包含所有應用級別狀態的物件

3、Getters：在元件內部獲取store中狀態的函式

4、Mutations：唯一修改狀態的事件回撥函式，預設是同步的，如果要非同步就使用Actions

5、Actions：包含非同步操作、提交mutations改變狀態

6、Modules：將store分割成不同的模組

四、案例

**index.js**

let store = new Vuex.Store({

state:{ //物件，應用所需要的狀態資料都放在這裡面

count:100

},

mutations:{ //物件，顯示的同步提交mutations

addIncrement(state,payload){ //這裡是自定義addIncrement事件

state.count+ = payload.n

}

},

actions:{

addAction( context ){ //這裡新加自定義事件addAction

setTimeout( ()=>{ /模擬非同步操作

//改變狀態，提交mutations，仍然是上面mutations裡面定義的事件addIncrement

context.commit('addIncrement',{n:15})

context.dispatch('textAction',{test:'測試'}) //這裡執行該非同步操作

},1000 )

},

textAction(context,obj){ //定義第二個非同步操作

console.log(obj) //{test:'測試'}

},

getListAction( context ){ //這裡定義了非同步介面action，在子元件created裡面呼叫

axios.get('url')

.then( (data)=>{

console.log(data); //得到了介面資料

} )

}

},

getters:{ //對store裡面的數值進行邏輯操作

filterState(state){

return state.count>=120?120:state.count

}

})

export default store

**increment元件：**

<span>{{filterNewNum}}</span>

</template>

computed:{

num(){

rerurn this.$store.state.count

},

filterNewNum(){ //這裡面接收過濾後的，倉庫裡面的資料

return this.$store.getters.filterState //注意是return，不要漏了

}

},

methods:{

addHandle(){ //改變狀態，提交mutations

this.$store.commit('addIncrement',{ //這裡是commit addIncrement

n:5 //引數

});

}

//這裡是非同步觸發一個action，注意和上面同步的不同之處

this.$store.dispatch.commit('addAction') //這裡是dispatch addAction

},

created(){

this.$store.dispatch('getListAction'); //dispatch

}

也可以這樣寫：

methods:{

addHandle(){

this.$store.commit({

type:'addIncrement', //改變的狀態型別

n:5 //引數

})

}

</script>

//上面是同步運算元據，使用mutations，如果要非同步運算元據，就用到Actions，注意，不管是同步還是非同步操作，改變資料前都得先提交mutations

//向後端傳送ajax請求就放在Actions裡面。在methods裡面建立方法，透過axios獲取資料，然後更新到store裡面定義的變數，這一系列操作都在index.js檔案裡面完成

如果要對store裡面的數值進行邏輯判斷，那麼就用到getters，用法類似於計算屬性computed

2、在main.js下面

import store from './store'

new vue({

router,

store

})

五、Vuex輔助函式

mapState

mapGetters

mapMutations

mapActions

改寫上面的程式碼：

Increment.vue元件

<p>{{count}}</p>

<span>{{filterNum}}</span>

</template>

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

export default {

data(){

},

computed:{

abc(){

return 123 //普通的計算屬性

},

...mapState(['count']) //這裡的count就是store裡面定義的倉庫裡面的count

...mapGeters(['filterNum']) //從getters裡面取值(經過邏輯處理的值)

},

methods:{

...mapMutations({ //改寫mutations，要傳參，引數在模板裡面新增reduce({n:11})

reduce:'reduceAction'

})

...mapActions({ //改寫actions

add:'addAction'

})

}

</script>

index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({

state:{

count:100

},

mutations:{

addHandle(state,payload){ //payload是引數

state.count+=payload.n;

},

reduceAction(state,payload){

state.count-=payload.n

}

},

actions:{

addAction(context){

setTimeout(()=>{

context.commit('addHandle',{n:15}) //非同步每次加15

},1000)

}

},

getters:{

filterNum(state){

return state.count>=102?102:state.count

}

})

export default store

六、在vue-cli裡面使用Vuex

1、npm install vuex --save

2、在src目錄下面新建store資料夾，裡面新建index.js

3、store/index.js程式碼：

import Vue from 'Vue'

import Vuex from 'Vuex'

Vue.use(Vuex)

let store = new Vuex.Store({

state:{

shopCarData:[] //購物車的資料預設資料格式是陣列，使用Vuex對這個陣列進行操作

},

mutations:{

addShopCarData(state,data){

//do something

}

},

getters:{

}

})

export default store

4、main.js程式碼

import store from './store'

new Vue({

el:'#app',

router,

store,

template:'<App/>',

components:{

App

}

})

Vuex教程

相關文章