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)触发
<div class="mini-player" v-show="!fullScreen" @click="open">
播放器缩小，如下图所示
image.png
网友评论