Vuex详解

理论基础

Vuex 是一个专为 Vue.js 应用程序开发的状态管理解决方案。它采用集中存储的方式管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

最后做下总结，我们使用 Store/State 定义和管理应用的核心数据，在组件中通过compute属性调用Getters 中的数据，如果我们要操作数据，我们可以通过使用 dispatch 方法调用已注册的 Actions 方法，Actions 再去调用相关的 mutations 进行数据的操作。

• State：数据，整个应用的数据中心，应用的相关组件在这里获取数据或更新数据，是整个应用唯一的数据中心。
• Store：数据中心的管家，只能在数据中心的内部进行更改，外部组件无法直接更改State，只能依赖dispatch action（行为调度） 或 commit a mutation（提交mutation）间接操作。
• Getters：Getters 的本质就是 Vuex store 的 computed 属性，读取 store/state 的内容，Getters中的数据将会被缓存，数据更新时其依赖的相关组件的状态也会随之及时更新。
• Mutations：改变数据的状态。在应用中共享全局数据状态时，也会导致一些问题，因为数据的改变可以来自任何组件，因此很难定位和跟踪数据的状态。因此 Vuex 提出了使用 Mutations 这种方式来更改数据的状态，并不是直接进行更改。Vue devtools 工具能很好很准确帮我定位哪些更改以及何时进行的更改。
• Actions：异步改变。如果要执行异步任务或多个相关的Mutations去更新数据状态时，我们需要 Actions 去定义函数进行操作，其函数第一个参数context可以获state, commit 和 getters 的相关属性，方便我们组织定义更复杂的逻辑。比如我们常用的接口数据请求获取数据，就会经常用到Actions。

示例一：

• 第一步：修改store目录下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 1000
  },
  mutations: {
    add (state) { // 注册事件：同步方法
      state.count++
    }
  },
  actions: {
    delayAdd (context) { // 触发事件：异步方法
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  },
  modules: {}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 第二步：Vue页面一

<template>
  <div>
    {{count}}
    <button @click="add">add</button>
  </div>
</template>
<script>
  export default {
    computed: {
      count () {
        return this.$store.state.count
      }
    },
    methods: {
      add () {
        this.$store.commit('add')
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

页面默认显示数字10，每一次单击按钮，数字立马增加1.
1

• 第三步：Vue页面二

<template>
  <div>
    {{count}}
    <button @click="add">add</button>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed: mapState({
      count: 'count'
    }),
    methods: {
      add () {
        this.$store.dispatch('delayAdd')
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

页面默认显示数字10，每一次单击按钮，数字1秒钟后增加1.

示例二：计算属性Getters

• 第一步：修改store目录下的index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 10
  },
  getters: {
    getCount (state) {
      return state.count
    }
  },
  mutations: {
    addition (state) {
      state.count++
    }
  },
  actions: {},
  modules: {}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 第二步：Vue页面

<template>
  <div>
    {{count}}
    <button @click="add">add</button>
  </div>
</template>
<script>
  export default {
    computed: {
      count () {
        return this.$store.getters.getCount
      }
    },
    methods: {
      add () {
        this.$store.commit('addition')
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

页面默认显示数字10，每一次单击按钮，数字立马增加1

示例三：模块化Modules

• 第一步：在store目录下创建visit.js：

export default {
  state: {
    count: 0
  },
  getters: {
    getCount (state) {
      return state.count
    }
  },
  mutations: {
    addition (state) {
      state.count++
    }
  },
  actions: {},
  modules: {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 第二步：修改store目录下的index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import visit from './visit'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    visit
  }
})
1
2
3
4
5
6
7
8
9
10
11

• 第三步：Vue页面

<template>
  <div>
    {{count}}
    <button @click="add">add</button>
  </div>
</template>
<script>
  export default {
    computed: {
      count () {
        return this.$store.getters.getCount
      }
    },
    methods: {
      add () {
        this.$store.commit('addition')
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

页面默认显示数字0，每一次单击按钮，数字立马增加1