vue学习笔记（十）——Vuex（状态管理，组件间共享数据）

1. vuex基础-介绍

1.1 为什么会有Vuex ?

在现代 Web 开发复杂多变的需求驱动之下，组件化开发已然成为了事实上的标准。然而大多数场景下的组件都并不是独立存在的，而是相互协作共同构成了一个复杂的业务功能。

组件间的通信成为了必不可少的开发需求。

1.2 Vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享的问题。

state：状态
mutation：突变；（生物物种的）变异；（形式或结构的）转变；改变
action：行为；（身体部位的）动作；活动；操作；措施；

结论
        ① 修改state状态必须通过mutations
        ② mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
        ③ 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
        ④ state的状态即共享数据可以在组件中引用
        ⑤ 组件中可以调用action

2. vuex基本使用

① 下载vuex
    yarn add vuex --save（-S）或 npm i vuex --save
        说明： vue 2.0版本命令：yarn add vuex@3 --save（-S）或 npm i vuex@3 --save，否则版本不兼容
-S 与 --save 的简写，安装包信息会写入 dependencies 中
-D 与 --save-dev 的简写，安装包写入 devDependencies 中
dependencies 与 devDependencies
        dependencies 生产阶段的依赖，也就是项目运行时的依赖，项目上线运行时依然需要的
        devDependencies 开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用的

② 引入

在main.js中 import Vuex from 'vuex'

③ 注册

在main.js中 Vue.use(Vuex) => 调用了 vuex中的一个install方法

④ 实例化对象

⑤ 注入vue实例

3. vuex-state使用

state是放置所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在 state对象中。类似与data。

// 初始化vuex对象
const store = new Vuex.Store({state: {// 管理数据count: 0}
})

3.1 如何在组件中获取count?

① 原始形式- 插值表达式

组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count，如下：

<div> state的数据：{{ $store.state.count }}</div>

② 计算属性 - 将state属性定义在计算属性中

// 把state中数据，定义在组件内的计算属性中  
computed: {    count () {      return this.$store.state.count    }  
}

 <div> state的数据：{{ count }}</div>

③ 辅助函数 - mapState

mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中, 它属于一种方便用法。
用法：
第一步：导入mapState

import { mapState } from 'vuex'

第二步：采用数组形式引入state属性

mapState(['count'])

第三步：利用延展运算符将导出的状态映射给计算属性

computed: {...mapState(['count'])
}

 <div> state的数据：{{ count }}</div>

4. vuex-mutations使用

使用上述的 addCount 方法，点击按钮后，网页中展示的 count 值会加1，但是vuex中共享状态state中的count值不会+1，如下图所示。

这是因为state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照 。数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步。

4.1 定义mutations

mutations是一个对象，对象中存放修改state的方法

const store  = new Vuex.Store({state: {count: 0},// 定义mutationsmutations: {// 方法里参数 第一个参数是当前store的state属性// payload 载荷 运输参数 调用 mutaiions 的时候 可以传递参数 传递载荷addCount (state, payload) {state.count += payload}}
})

4.2 如何在组件中调用mutations中的方法（提交）

① 原始形式调用

<template><button @click="addCountTest">原始方式调用，点击按钮state的值+ 10</button>
</template><script>
export default {methods: {// 原始方式调用方法addCountTest() {// 调用store中的mutations 提交给 muations// commit('muations名称', 参数)this.$store.commit('addCount', 10)  // 直接调用mutations}}
}
</script>

② 辅助函数形式-mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

<template><button @click="addCount(100)">原始方式调用，点击按钮state的值+ 100</button>
</template><script>
import  { mapMutations } from 'vuex'
export default {methods: {...mapMutations(['addCount'])}
}
</script>

上面代码的含义是将mutations的方法导入了methods中，等同于原始方式的调用。但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中。

5. vuex-actions使用

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

5.1 定义actions

const store  = new Vuex.Store({state: {count: 0},mutations: {addCount (state, payload) {state.count += payload}},//  获取异步的数据actions: { // context 表示当前的 store 的实例 // 可以通过 context.state 获取状态 // 也可以通过 context.commit 来提交 mutations // 也可以 context.diapatch 调用其他的 actiongetAsyncCount (context，val) {setTimeout (() => {// 模拟异步请求// 一秒钟之后 要给一个数 去修改statecontext.commit('addCount', val)}, 1000)}} 
})

5.2 组件中对actions中的异步方法调用(派遣)

① 原始形式调用

<template><div><button @click="add(222)">原始形式异步调用，点击 + 222</button></div>
</template><script>
export default {methods: {add(val) {// dispatch 派遣 发送this.$store.dispatch('getAsyncCount',val)}}
}
</script>

② 辅助函数形式-mapActions

actions也有辅助函数，可以将action导入到组件中

<template><div><button @click="getAsyncCount(222)">辅助函数形式异步调用，点击 + 222</button></div>
</template><script>
import { mapActions } from 'vuex'
export default {methods: {...mapActions(['getAsyncCount'])
}
</script>

6. vuex-getters（类似过滤器）

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

例如，state中定义了list，为1-10的数组，

state: {list: [1,2,3,4,5,6,7,8,9,10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

6.1 定义getters

 getters: {// getters函数的第一个参数是 state// 必须要有返回值filterList: (state) => {return state.list.filter((item) => {return item > 5})
}

6.2 使用getters

① 原始方式

<div>{{ $store.getters.filterList }}</div>

② 辅助函数 - mapGetters


<template><div><div>{{ filterList }}</div></div>
</template><script>
import { mapGetters} from 'vuex'
export default {computed: {...mapGetters(['filterList'])
}
</script>

vuex中state、mutations、actions、getters使用的详细代码如下：

main.js

import Vue from 'vue'
import App from './App.vue'
//  下载，引入，注册，实例化对象，注入
import Vuex from 'vuex'
Vue.use(Vuex)const store = new Vuex.Store({//  共享的数据，类似于 data，在计算属性中使用state: {count : 0,list: [1,2,3,4,5,6,7,8,9,10]},//  更改共享的状态，必须使用 mutations 中的提交方法mutations: {//  第一参数 state 是当前 store 中的 state 属性addCount(state, payload) {return state.count += payload}},// 通过 action修改异步任务中的数据，派遣 mutations中的方法提交actions: {//  使用延时函数来模拟异步请求// context 表示当前的 store 的实例 asyncAddCount (context, val) {return setTimeout(() => {context.commit('addCount', val)},1000)}},getters: {// getters里函数的第一个参数是 state// 必须要有返回值filterList: (state) => {return state.list.filter((item) => {return item > 5})}}
})Vue.config.productionTip = falsenew Vue({store,render: h => h(App)
}).$mount('#app')

组件中的应用：

<template><div><p>原始方式调用state里count的值:<span>{{ $store.state.count }}</span></p><p>使用计算属性的方式调用state里count的值: <span>{{ count2 }}</span></p><p>使用辅助函数的形式调用state里count的值: {{ count }}</p><button @click="addCountTest">使用原始的方式修改count的值 + 1</button><button @click="addCount(123)">使用辅助函数的方式修改count的值 + 123</button> <hr><p>在组件中对actions中的异步方法进行调用</p><button @click="asyncAdd">原始方式异步派遣count值 + 333</button><button @click="asyncAddCount(444)">辅助函数方式异步派遣count值 + 444</button><hr><p>原始方式调用list中大于5的值为: {{ $store.getters.filterList }}</p><p>辅助函数方式调用list中大于5的值为: {{ filterList }}</p></div>
</template><script>
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
import { mapActions } from 'vuex';
import { mapGetters } from 'vuex';
export default {computed: {count2 () {return this.$store.state.count},// mapState 方法以数组的方式引入到计算属性中，所以需要使用扩展运算符 ...映射出 count的值 ...mapState(['count']),...mapGetters(['filterList'])},methods: {//  虽然网页中的值会加 1，但是 vuex中 state 中的 count 值不会变化，// 因为 state 中的数据只能通过 mutations 中的方法进行修改，所以此种方式是错误的方法 // addCountTest () {//   this.$store.state.count += 1// }addCountTest() {//  提交 mutations 中的 addCount 方法this.$store.commit('addCount', 1)},//  使用辅助函数的形式...mapMutations(['addCount']),//  派遣 actions 中的 asyncAddCount 方法asyncAdd () {this.$store.dispatch('asyncAddCount',333)},...mapActions(['asyncAddCount'])}
}
</script><style></style>

7. 总结口诀（重点）

7.1 vuex 基本使用

下载，引入，注册，对象，注入

下载vuex的版本记得与vue的版本匹配

state相当于data，组件里使用用computed

mutations中的方法（methods）用于同步提交（commit）使用，方法里的第一个参数为state，第二个参数为传递参数payLoad。

actions中的方法（methods）只能异步派遣（dispatch）mutations中的提交（commit）使用，方法里的第一个参数上下文（context）为当前 store 实例，第二个参数为传递的值。

getters相当于过滤器，过滤 state 中的数据，方法里的第一个参数是为state。

辅助函数形式使用需要用map数组引入，拓展三点（...）映射。

8. Vuex中的模块化-Module

8.1 为什么会有模块化？

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护。由此，又有了Vuex的模块化。

8.2 模块化的简单应用

定义两个模块 user 和 setting
user中管理用户的状态 token
setting中管理应用的名称 name

const store  = new Vuex.Store({modules: {user: {state: {token: '12345'}},setting: {state: {name: 'Vuex实例'}}})

① 定义child-b组件，用原始方式分别显示用户的token和应用名称name

<template><div><div>用户token {{ $store.state.user.token }}</div><div>网站名称 {{ $store.state.setting.name }}</div></div>
</template>

请注意：此时要获取子模块的状态需要通过 $store.state.模块名称.属性名 来获取

② getters方式分别显示用户的token和应用名称name

const store = new Vuex.Store({getters: {token: (state) => {return state.user.token},name: (state) => {return state.setting.name}},modules: {// 放置子模块user: {state: {token: '123456'},setting: {state: {name: '刘建超'}}}
})

<template><div><div>用户token {{ token }}</div><div>网站名称 {{ name }}</div></div>
</template>
<script>
import { mapGetters } from 'vuex';export default {computed: {...mapGetters(['token','name']),}
}
</script>

8.3 模块化中的命名空间

① 命名空间 namespaced

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。这句话的意思是刚才的user模块还是setting模块，它的 action、mutation 和 getter 其实并没有区分，都可以直接通过全局的方式调用。

如：user子模块中的 mutation 的updatedToken可以通过全局的方式调用。

const store = new Vuex.Store({modules: {// 放置子模块user: {state: {token: '123456'},mutations: {updatedToken(state) {state.token = '6789'}},actions: {}}
})

通过mapMutations调用

 methods: {...mapMutations(['updateToken'])}<button @click="updateToken">修改token</button>

但是，如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置。

高封闭性？可以理解成一家人如果分家了，此时，你的爸妈可以随意的进出分给你的小家，你觉得自己没什么隐私了，我们可以给自己的房门加一道锁（命名空间 namespaced）,你的父母再也不能进出你的小家了。如：

const store = new Vuex.Store({modules: {// 放置子模块user: {// 加一道锁，使得全局不能访问子模块中的方法namespaced: true,state: {token: '123456'},mutations: {//  这里的state表示的是user的stateupdatedToken(state) {state.token = '6789'}},actions: {}}
})

② 使用带命名空间的模块 action/mutations

方案1：直接调用-带上模块的属性名路径

test () {this.$store.commit('user/updateToken') // 直接调用方法
}

方案2：辅助函数-带上模块的属性名路径

import { mapMutations } from 'vuex'; 
methods: {...mapMutations(['user/updateToken']),// 这里相当于导入这个updateToken函数test () {this['user/updateToken']()// 在这里通过 this 的方式调用了updateToken 函数// 相当于对象中去获取属性值的两种方式，一种是通过对象.属性名的方式// 另一种是 对象['属性名']}}<button @click="test">修改token</button>

方案3： createNamespacedHelpers 创建基于某个命名空间辅助函数

import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
export default {methods: {...mapMutations(['updatedToken'])}
}
<button @click="updateToken">修改token2</button>