vuex的简单介绍

1、vuex的定义

1）Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，使用插件的形式引进项目中

2）集中存储和管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

3）每一个 Vuex 应用的核心就是 store（仓库），new Vue.store({...})，“store”基本上就是一个容器，它包含应用中大部分的状态 (state)

2、vuex解决的问题

1）多个视图依赖于同一状态

2）来自不同视图的行为需要变更同一状态

Vuex则是把组件的共享状态抽取出来，以一个全局单例模式管理

同时，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，代码变得更结构化、易维护

以上就是vuex的思想

3、使用vuex的场景

开发大型单页应用

4、vuex和全局对象的区别

1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2）你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

5、vuex中的5个核心概念

1）state对象：（在computed中引入）Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态；每个应用将仅仅包含一个 store 实例

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

2）getters对象：(可以认为是store的计算属性)，在组件中的computed中引入

getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

Getter 接受 state 作为其第一个参数，也可以接受其他 getter 作为第二个参数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }

给getter 属性另取一个名字，使用对象形式

mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

3）mutations对象：更改 Vuex 中 store 的状态的唯一方法是commit mutation;

mutation类似于事件，每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)；

回调函数对状态进行更改， state 作为第一个参数

import * as types from './mutation-types'
//mutations里面存放的是方法名
const mutations = {
  [types.SET_SINGER](state, singer) {
    //能够获取到当前状态树的state,提交mutation的时候传的参数
    state.singer = singer
  },
  [types.SET_PLAYING_STATE](state, flag) {
    state.playing = flag
  },
  [types.SET_FULL_SCREEN](state, flag) {
    state.fullScreen = flag
  },
  [types.SET_PLAYLIST](state, list) {
    state.playlist = list
  },
  [types.SET_SEQUENCE_LIST](state, list) {
    state.sequenceList = list
  },
  [types.SET_PLAY_MODE](state, mode) {
    state.mode = mode
  },
  [types.SET_CURRENT_INDEX](state, index) {
    state.currentIndex = index
  }
}
export default mutations

不能直接调用mutation，需要使用store.commit(mutation)来调用

提交载荷：可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload），作为mutation的第二个参数

对象风格的提交方式：直接使用包含 type 属性的对象

store.commit({
  type: 'increment',
  amount: 10
})

mutations需遵守Vue的响应规则：

1）最好提前在 store实例化中初始化好所有所需属性

2）在对象上添加新的属性的方法：

 Vue.set(obj, 'newProp', 123)

//以新对象替换老对象，使用对象展开运算符
state.obj = { ...state.obj, newProp: 123 }

使用常量替代mutation类型，通常在mutation-types中定义
mutation是同步函数：实质上任何在回调函数中进行的状态的改变都是不可追踪

在组件中提交mutation：

this.$store.commit('xxx') 提交 mutation

使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）

methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }

4）actions对象： actions类似mutations，不同之处

action 提交的是 mutation，mutation直接变更状态。
action 可以包含任意异步操作

当某个动作触发多个mutation的时候使用action

每一个action 函数接受一个与 store 实例具有相同方法和属性的对象，比如叫做context对象，因此可以调用 context.commit 提交一个 mutation，通过 context.state 和 context.getters 来获取 state 和 getters

使用参数结构来简化代码：

actions: {
  increment (context,payload) {
    commit('increment')
  }
}
实际上可以写成类似下面的形式，使用参数结构的方法来简化代码
actions: {
  increment ({ commit，state },{m,n}) {
    commit('increment')
  }
}

分发action： store.dispatch，在action内部执行异步操作

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Actions 支持载荷方式和对象方式进行分发

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

在组件中分发action：

this.$store.dispatch('xxx') 分发 action

使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

5）Module：使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

总结：在使用vuex的时候，如果使用模块化的思想来编程的话，那么通常情况下就需要定义6个js文件，分别是

index.js    state.js    getters.js    mutation-types.js    mutation.js   actions.js

1、index.js：在这里面去引入其他5个JS文件，然后export 一个Vuex.store({})的实例对象，然后再main.js文件里面import该js文件，在Vue实例里面添加store选项，即在根节点下注册该store对象

//index.js文件里面的内容
//store文件夹下，编写vuex的相关代码
//index.js是vuex的入口文件
//vuex中的state只能通过commit修改，不能直接修改
import Vue from 'vue'
import Vuex from 'vuex'
//起别名是为了像调用对象的方法一样，调用模块里面定义的方法
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
//使用vuex提供的一些插件
//通过mutation方式修改state的时候，他会在console中输出日志
import createLogger from 'vuex/dist/logger'
//注册插件Vuex
Vue.use(Vuex)
//npm run dev则process.env.NODE_EN=develop
//npm run builde则process.env.NODE_EN=production
//有性能损耗，所以在开发环境中使用
const debug = process.env.NODE_ENV !== 'production'
//输出一个实例化的vuex对象
export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

2、state.js：在这里面定义一些组件之间的公用状态变量对象，然后export state对象

//所有的状态都放在这个文件夹下管理
//也就是存放数据的对象
//这里要管理的是singer
//playMode对象里面定义了一些常量
import {playMode} from '../common/js/config'

const state = {
  singer: {},
  //播放的状态
  playing: false,
  //歌单展开控制
  fullScreen: false,
  //播放的是一个列表
  playlist: [],
  //播放的歌单是一个有顺序的列表
  sequenceList: [],
  //设置播放模式，顺序播放，随机播放
  mode: playMode.sequence,
  //当前播放的一个索引
  currentIndex: -1
}
export default state

3、getters.js：在这里面定义一些常量变量，它的值是函数的返回值，用于获取state.js中的对象的值；或者是当做store对象的计算属性，对state.js的属性对象进行计算，得到一些计算结果的变量，export多个常量

//获取states里面的属性,会做一些映射
//或者作为计算属性，根据states中的属性，计算得到另外一些属性
//代理计算属性,在组件中在computed中可以通过...mapGetters([])引入
//或mapGetters({})，给函数取别名
//getter的第一个参数为state,第二个可选是getter
export const singer = state => state.singer
export const playing = state => state.playing
export const fullScreen = state => state.fullScreen
export const playlist = state => state.playlist
export const sequenceList = state => state.sequenceList
export const mode = state => state.mode
export const currentIndex = state => state.currentIndex
export const currentSong = state => {
  return state.playlist[state.currentIndex] || {}
}

4、mutation-types.js：在这里面定义一些操作mutation的字符串常量变量名，这里是定义一些动作名，所以名字一般是set 或者是update,然后再结合state.js中定义的变量对象，export多个常量

//存储mutation的一些相关的名字，也就是一些字符串常量
//即使用常量替代mutation类型
//mutations里面定义一些方法，这里也就是定义mutations里面方法的名字
// 一些动作，所以用set,update
export const SET_SINGER = 'SET_SINGER'
export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'
export const SET_PLAYLIST = 'SET_PLAYLIST'
export const SET_SEQUENCE_LIST = 'SET_SEQUENCE_LIST'
export const SET_PLAY_MODE = 'SET_PLAY_MODE'
export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX'

5、mutations.js：在这里面定义一些修改state.js中变量对象的值的方法，这些方法都放在一个常量mutations对象里面，然后export mutations

//输出一个mutations对象，
//每一个mutation的第一个参数state，第二个参数是payload
//用于改变state中的属性的状态
//这些操作都是同步操作
//在组件的methods中通过...mapMutations([])或者...mapMutations({})--用于改别名
import * as types from './mutation-types'
//mutations里面存放的是方法名
const mutations = {
  [types.SET_SINGER](state, singer) {
    //能够获取到当前状态树的state,提交mutation的时候传的参数
    state.singer = singer
  },
  [types.SET_PLAYING_STATE](state, flag) {
    state.playing = flag
  },
  [types.SET_FULL_SCREEN](state, flag) {
    state.fullScreen = flag
  },
  [types.SET_PLAYLIST](state, list) {
    state.playlist = list
  },
  [types.SET_SEQUENCE_LIST](state, list) {
    state.sequenceList = list
  },
  [types.SET_PLAY_MODE](state, mode) {
    state.mode = mode
  },
  [types.SET_CURRENT_INDEX](state, index) {
    state.currentIndex = index
  }
}
export default mutations

6、actions.js：在这里面定义一些常量方法，每个常量方法用于提交多个mutation，然后输出多个常量方法名

//当一个动作会触发多个mutation则在actions里面定义一个方法，从而触发这些mutation
import * as types from './mutation-types'
import {playMode} from '../common/js/config'
import {shuffle} from '../common/js/util'
function findIndex(list, song) {
  return list.findIndex((item) => {
    return item.id === song.id
  })
}
export const selectPlay = function ({commit, state}, {list, index}) {
  commit(types.SET_SEQUENCE_LIST, list)
  if (state.mode === playMode.random) {
    let randomList = shuffle(list)
    commit(types.SET_PLAYLIST, randomList)
    //将在顺序列表中播放的歌，在随机播放列表中的index
    //确保点击“随机播放按钮”的时候还是当前这首歌
    index = findIndex(randomList, list[index])
  } else {
    commit(types.SET_PLAYLIST, list)
  }
  commit(types.SET_CURRENT_INDEX, index)
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
}
//定义一个随机播放的action
export const randomPlay = function ({commit}, {list}) {
  commit(types.SET_PLAY_MODE, playMode.random)
  commit(types.SET_SEQUENCE_LIST, list)
  let randomList = shuffle(list)
  commit(types.SET_PLAYLIST, randomList)
  commit(types.SET_CURRENT_INDEX, 0)
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
}

猜你喜欢