vue vuex 挂載_Vue項目--vuex的使用與了解

1.在項目main.js中引入store，并挂載

import store from './store'

......

new Vue({

el: '#app',

render: h => h(App),

//把store對象提供給‘store’選項，這可以把store的執行個體注入所有的元件

store

})

2.建立store倉庫，結構如下

image.png

3.state的了解

單一狀态樹

我的了解就是：state狀态就是資料源

比如很多個視圖層檔案(元件)都是同一個資料來源，不同視圖的操作都需要改為同一個資料源。那麼就可以把這個資料提出來，存在state中。

image.png

4.getters的了解

getters是對state做一些映射----基礎的代理

export const singer = state => state.singer

有時候我們需要從 store 中的 state 中派生出一些狀态

// 計算屬性

export const currentSong = (state) => {

return state.playlist[state.currentIndex] || {}

}

上面的currentSong就是通過playlist資料與currentIndex計算而來的

image.png

5.mapGetters輔助函數

mapGetters輔助函數，僅僅是将store中的 getters 映射到局部計算屬性：

首先在元件中引入：

import {mapGetters} from 'vuex'

其次，在計算屬性computed中使用

computed: {

// 使用對象展開運算符将 getters 混入 computed 對象中

...mapGetters([

'playing'

// 'playing'對應getters中的playing

// 如果想給getter屬性換個名字： 'newplaying'： 'playing'

])

}

image.png

6.mutation-types的了解

存儲mutation相關的狀态常量

image.png

7.mutations的了解

更改 Vuex 的 store 中的狀态的唯一方法是送出 mutation

image.png

8.mapMutations輔助函數

首先，元件中引入

import {mapMutations} from 'vuex'

其次，在methods中使用

methods: {

back() {

this.setFullScreen(false)

},

open() {

this.setFullScreen(true)

},

changeMode() {

const mode = (this.mode + 1) % 3

this.setPlayMode(mode)

let list = null

if (mode === playMode.random) {

list = shuffle(this.sequenceList)

} else {

list = this.sequenceList

}

this._resetcurrentIndex(list)

this.setPlayList(list)

},

...mapMutations({

setFullScreen: 'SET_FULL_SCREEN',

setPlayingState: 'SET_PLAYING_STATE',

setCurrentIndex: 'SET_CURRENT_INDEX',

setPlayMode: 'SET_PLAY_MODE',

setPlayList: 'SET_PLAYLIST'

})

}

我的了解：

這裡的字元串 'SET_FULL_SCREEN'，對應的是mutation-types中的字元串'SET_FULL_SCREEN'，setFullScreen是新起的對應的事件名，友善在methods中使用。

9.actions的了解

mutations送出同步狀态的改變；

actions送出異步的狀态改變，實際上actions是先将改變回報到mutation，再通過mutation進行送出。

image.png

10.index.js

可以了解為入口，或者接口

image.png

總結一番：

以上截圖是我做得一個音樂APP項目中的截圖。

以播放器全屏、縮小為例：

假設處于目前模式(如圖)：

image.png

當點選左上角的向下箭頭圖示的時候：

1)觸發methods中的back()函數,

2)送出資料false

methods: {

back() {

this.setFullScreen(false)

},

...mapMutations({

setFullScreen: 'SET_FULL_SCREEN',

})

}

3)back()函數中的

this.setFullScreen

對應mapMutations中的

setFullScreen: 'SET_FULL_SCREEN',

4)mapMutations中的

setFullScreen: 'SET_FULL_SCREEN',

對應，mutation-types中的

export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'

5)再到mutations中的

[types.SET_FULL_SCREEN](state, flag) {

state.fullScreen = flag

},

其中參數flag對應back()函數的參數false

6)通過mutations改變state的狀态

7)state.fullScreen的狀态變為false，映射到getters中

export const fullScreen = state => state.fullScreen

在通過mapGetters插入到元件中

...mapGetters([

'fullScreen'

])

8)觸發

播放器縮小，如下圖所示

image.png