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)触发

<div class="mini-player" v-show="!fullScreen" @click="open">

播放器缩小，如下图所示

image.png