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