Vuex状态管理笔记整理

Vuex 是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

开始

看了很多vuex教程有配置有操作之类的,我个人对于Vuex操作点理解就是三个,第一个点是初始化,因为建立了脚手架之后默认的store.js并不能满足我们复杂的业务需求所以需要抽离等初始化(初配置)操作,第二个点就是读,怎么读取store里的值,第三个点就是写,怎么把数值写入(更新)到store当中。

推荐阅读 vuex最简单、最详细的入门文档 - 梁晓谊

先理解

Vuex中几个常用到的关键字State,Getter,Mutation,Action

这是官方文档提供的一张流程图

大致流程如下:

  • 在组件中通过dispatch调用actions
  • actions中通过commit调用mutations
  • mutations中修改state的值
  • 返回到视图上

初始化

用vue脚手架搭建的目录解构一般是src/store.js这是无法满足我们需求的,所以就要进行一个初始化(具体需要 根据业务来)

1
2
3
4
5
6
├── store
│ ├── getter.js
│ ├── index.js
│ ├── module // 模块文件夹
│ │ └── study.js
│ └── state.js

首先可以在src下建立一个名为store的文件夹,大致结构如上

index.js文件配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import Vuex from 'vuex'
import study from './module/study'
import state from './state'
import getters from './getter'
Vue.use(Vuex)

export default new Vuex.Store({
modules: {
study
},
state,
mutations: {},
actions: {},
getters
})

这里是导出Vuex实例,能够在别的地方引入时候用到,module下的study可以这么写,每个模块内基本都包含state,mutations,actions三大块(后述代码都是根据这里来的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const demo = {
state: {
text: 'hello world'
},
mutations: {
CHANGE_TEXT (state, value) {
state.text = value
}
},
actions: {
changeText ({ commit }, val) {
return new Promise((resolve, reject) => {
commit('CHANGE_TEXT', val)
resolve('success')
})
}
}
}

export default demo

如果有用到Getter可以这么写

Getter类似于store的计算属性

1
2
3
4
5
const getters = {
showText: state => state.study.text + ' getters'
}

export default getters

什么时候会用到Getter?官方给了这样一段案例解释

1
2
3
4
5
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}

如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数:

1
2
3
4
5
6
7
8
9
10
11
12
13
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})

读取操作

mapGetters 一般也写在 computed 中 , mapActions 一般写在 methods 中。

  • $store

    console.log(this.$store.state.study.text) // hello world

  • mapState

    要先引入import { mapState } from 'vuex'

    1
    2
    3
    ...mapState({
    stext: state => state.study.text
    }),

    console.log(this.stext) // hello world

  • Getter

    要先引入import { mapGetters } from 'vuex

    1
    2
    3
    ...mapGetters({
    showText: 'showText'
    })

    console.log(this.showText) // hello world getters

    这里的值做了下改变(见上state.study.text + ' getters')所以返回了hello world getters

写入(更新)操作

如果不具有异步操作可以不走Actions可以直接Commit走Mutations然后后面步骤一样

  • $store
    this.$store.commit('CHANGE_TEXT', 'hello') // hello

  • mapMutations

    要先引入import { mapMutations } from 'vuex

    1
    2
    3
    4
    5
    ...mapMutations([
    'CHANGE_TEXT'
    ]),

    this.CHANGE_TEXT('hello') // hello
  • mapActions

    要先引入import { mapActions } from 'vuex

    1
    2
    3
    4
    5
    ...mapActions([
    'changeText'
    ])

    this.changeText('hello') // hello
  • dispatch

    this.$store.dispatch('changeText', 'hello')