第九节：Vuex简介、基本使用、核心功能(State、Mutation、Action、Getter) 和 案例实战演练
一. Vuex简介/基本使用
1. 背景
传统的组件见的交互模式如下： (可参考：https://www.cnblogs.com/yaopengfei/p/12326466.html)
(1). 父向子传值：v-bind 属性绑定
(2). 子向父传值：v-on 事件绑定
(3). 兄弟组件之间共享数据： EventBus
$on 接收数据的那个组件
$emit 发送数据的那个组件
2. 简介
(官方网站：https://vuex.vuejs.org/zh/)
(1). 定义
Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。下图是没有vuex和有vuex时的处理模式。
(2). 好处
① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护
② 能够高效地实现组件之间的数据共享，提高开发效率
③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步
(3). 什么情况下采用Vuex
一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。
3. 基本使用
(1). 已经存在的项目中引入Vuex
A. 安装Vuex组件包
npm install vuex --save
B. 在main.js中导入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
C. 创建Vuex对象store
const store = new Vuex.Store({ // state 中存放的就是全局共享的数据 state: { count: 0 } })
PS：通常将Vuex单独封装到一个store.js文件中，然后在main.js中进行导入即可，然后挂载即可
main.js导入代码，挂载见步骤D
import store from './store'
store.js代码如下
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 } })
D. 将 store 对象挂载到 vue 实例中
new Vue({ store, render: h => h(App) }).$mount('#app')
(2). 新建项目时引入Vuex
使用图形化界面进行创建项目，选择插件的时候，要勾选Vuex，如下图：
其它详细步骤可参考：https://www.cnblogs.com/yaopengfei/p/14506321.html
创建后的项目：
src根目录下，创建了一个Store文件夹，下面有index.js文件，用来处理vuex
index.js代码如下：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, modules: { } })
main.js代码如下：
import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({ store, render: h => h(App) }).$mount('#app')
二. 核心功能
1. State
(1). 用途
State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。
// 创建store数据源，提供唯一公共数据 const store = new Vuex.Store({ state: { count: 0 } })
(2). 组件两种访问方式
A. 直接 this.$store.state.全局数据名称 访问
this.$store.state.count
B. 借助mapState
2. Mutation
(1). 用途
Mutation 用于变更State中 的数据。
① 只能通过 mutation 变更 State中 数据，不可以直接操作 Store 中的数据。(禁止 通过 this.$store.state.count 获取后直接修改)
② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
注：Mutation中声明方法，方法的第一个参数为state，可以获取State中属性，其它参数可以自定义。
(2). 组件两种访问方式
A. 通过 this.$store.commit() 调用，下面分别是无参 和 有参的调用。
B. 通过mapMutations导入。
使用：
3. Action
(1). 用途
Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。
注：Action中声明的是方法，方法的第一个参数为context，可以通过context.commit 调用 Mutation中的方法。其它参数可以自定义
(2). 组件两种访问方式
A. 通过this.$store.dispatch()进行调用，下面分别是有参 和 无参的调用。
B. 通过导入mapActions调用。
调用：
4. Getter
(1). 用途
Getter 用于对 State 中的数据进行加工处理形成新的数据。
① Getter 可以对 State 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
② State 中数据发生变化，Getter 的数据也会跟着变化。
注意：Getter中声明的是方法，方法的第一个参数为state，可以获取State中属性。
// 定义 Getter const store = new Vuex.Store({ state: { count: 0 }, getters: { showNum (state) { return '当前最新的数量是【' + state.count + '】' } } })
(2). 组件两种访问方式
A. 通过this.$store.getters.名称调用
<h3>{{$store.getters.showNum}}</h3>
B. 借助mapGetters调用
<h3>{{showNum}}</h3>
三. 案例演练
1. 要求
全局维护1个count变量，分别实现用两种模式实现： 自增1、自增N、异步自增1、异步自增N；自减1、自减N、异步自减1、异步自减N；
2. 实现思路
(1). 声明1个Add组件 和 Sub组件，分别用来处理自增 和 自减效果。导入App.vue中。
(2). 在Vuex对应的index文件中的
state：声明count变量
getter：修饰count变量
mutation：声明自增、自减的同步方法
Action：声明自增、自减的异步方法
(3). 在Add组件中通过 this.$store.state 、this.$store.getter、 this.$store.commit、this.$store.dispatch的方式调用。
在Sub组件中通过 import { mapState, mapMutations, mapActions, mapGetters } from 'vuex' 的方式进行调用。
3. 代码分享
Vuex对应
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, // 只有 mutations 中定义的函数，才有权利修改 state 中的数据 // 里面声明的方法，第一个参数为固定值state，用于获取state中的值 mutations: { add (state) { // 不要在 mutations 函数中，执行异步操作！！！ // setTimeout(() => { // state.count++ // }, 1000) state.count++ }, addN (state, step) { state.count += step }, sub (state) { state.count-- }, subN (state, step) { state.count -= step } }, actions: { addAsync (context) { setTimeout(() => { // 在 actions 中，不能直接修改 state 中的数据； // 必须通过 context.commit() 触发某个 mutation 才行 context.commit('add') }, 1000) }, addNAsync (context, step) { setTimeout(() => { context.commit('addN', step) }, 1000) }, subAsync (context) { setTimeout(() => { context.commit('sub') }, 1000) }, subNAsync (context, step) { setTimeout(() => { context.commit('subN', step) }, 1000) } }, getters: { showNum (state) { return '当前最新的数量是【' + state.count + '】' } } })
Add组件
<template>
<div>
<h3>当前最新的count值为：{{$store.state.count}}</h3>
<h3>{{$store.getters.showNum}}</h3>
<button @click="btnHandler1">+1</button>
<button @click="btnHandler2">+N</button>
<button @click="btnHandler3">+1 Async</button>
<button @click="btnHandler4">+N Async</button>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {
btnHandler1 () {
this.$store.commit('add')
},
btnHandler2 () {
// commit 的作用，就是调用 某个 mutation 函数
this.$store.commit('addN', 3)
},
// 异步地让 count 自增 +1
btnHandler3 () {
// 这里的 dispatch 函数，专门用来触发 action
this.$store.dispatch('addAsync')
},
btnHandler4 () {
this.$store.dispatch('addNAsync', 5)
}
}
}
</script>
<style>
</style>
Sub组件
<template>
<div>
<h3>当前最新的count值为：{{count}}</h3>
<h3>{{showNum}}</h3>
<button @click="btnHandler1">-1</button>
<button @click="subN(3)">-N</button>
<button @click="subAsync">-1 Async</button>
<button @click="subNAsync(5)">-N Async</button>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count']),
...mapGetters(['showNum'])
},
methods: {
...mapMutations(['sub', 'subN']),
...mapActions(['subAsync', 'subNAsync']),
btnHandler1 () {
this.sub()
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<my-add></my-add>
<p>---------------------------------</p>
<my-sub></my-sub>
</div>
</template>
<script>
import Add from './components/Add.vue'
import Sub from './components/Sub.vue'
export default {
name: 'App',
components: {
'my-add': Add,
'my-sub': Sub
}
}
</script>
<style>
</style>
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
