【Vuex】基本介绍及使用详解
Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。
要点：
- vue官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具
- 集中式管理数据状态方案 (操作更简洁)
data() { return { 数据, 状态 }} - 数据变化是可预测的 (响应式)
vue官方提供的独立于组件体系之外的，管理公共数据的工具
使用场景
大型项目
小结
vuex是vue官方提供的独立于组件体系之外的，管理公共数据的工具
Vuex-学习内容
目标
了解vuex的学习内容
Vuex的学习内容
Vuex中有5个内容需要学习：
- state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
- mutations ： 使用它来修改数据(类似于methods)
- getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
- actions： 发起异步请求
- modules： 模块拆分
其中最为重要的内容是state和mutations
小结
五个概念：state, mutations, getters, actions, modules
Vuex-在Vue项目使用Vuex
目标
掌握在vue项目中使用vuex的方式
两种情况
- 情况1：在老项目中使用。 先额外安装vuex包，然后在配置。
- 情况2：在新项目中使用。 在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的）。具体如下图示：
这里只说明第1种情况。
在旧项目中使用vuex
假设之前已经有一个vue项目了，其中并没有使用vuex，现在我们来用一下。
注意，这里省略用vue脚手架创建项目的过程。
整体步骤：
- 安装。它是一个独立的包，需要先安装。
- 配置
- 创建Vuex.store实例
- 向Vue实例注入store
- 使用。在组件中使用store
安装包
进入项目目录，安装包
yarn add vuex
开发依赖：
- yarn add vuex --save-dev
- yarn add xxxx -D
生产依赖：
- yarn add xxxx --save
- yarn add xxxx -S
- yarn add xxxx
实例化store
与router一样，当我们在项目中使用vuex之后，为了方便代码维护，我们一般需要做特殊的目录调整，约定的结构如下：
|--src
|----- main.js
|----- store
|----------- index.js在store/index.js 中放置具体的代码，具体如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
向Vue实例注入store
在src/main.js中：
- 导入store
- 并注入Vue实例
// 省略其他
// 1. 导入store
import store from './store'
new Vue({
// 省略其他...
store // 2. 注入Vue实例
})
在组件中使用store
在任意组件中，通过this.$store.state 来获取公共数据。
小结
在老项目中使用vuex的步骤
- 安装。它是一个独立的包，需要先安装。
- 配置
- 创建Vuex.store实例(有固定代码，类似于vue-router；需要记忆)
- 向Vue实例注入store
- 使用。在组件中使用store。
this.$store.state
附 ：vue-router的使用方式
目录结构
|- router # 路由
|------ index.js
|- main.js # 项目入口文件关键代码
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 默认导出 export defalut
export default new Router({
routes: []
})
Vuex-state定义公共数据并在组件中使用
目标
掌握state的使用方式
state的作用
vuex用它来保存公共数据
定义公共数据
格式
new Vuex.store({
state: {
属性名： 属性值
}
})
示例
new Vuex.store({
state: {
userInfo: {
name: 'tom',
skills: ['抖音', 'B站', '美团'],
address: '武汉黑马',
logo: 'https://vuejs.org/./images/logo.svg'
// https://www.runoob.com/wp-content/uploads/2016/02/react.png
}
}
})
使用公共数据
格式：
在组件中，通过this.$store.state.属性名来访问。
在模板中，则可以省略this而直接写成： {{$store.state.属性名}}
vue-devtool调试工具
在调试工具中查看。
state的作用是：保存公共数据（多组件中共用的数据）
state是响应式的： 如果修改了数据，相应的在视图上的值也会变化。
Vuex-用mutations修改公共数据
目标
掌握mutations的作用及格式； 能用它来修改state
作用
通过调用mutations来修改定义在state中的公共数据。
格式
分两个格式： 注册的格式，调用的格式
定义格式： 如下
new Vue.store({
// 省略其他...
mutations：{
// 每一项都是一个函数，可以声明两个形参
mutation名1：function(state [, 载荷]) {
},
mutation名2：function(state [, 载荷]) {
},
}
})
每一项都是一个函数，可以声明两个形参：
- 第一个参数是必须的，表示当前的state。在使用时不需要传入
- 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据
使用格式
this.$store.commit('mutation名', 实参，给第二个参数)
这里的commit是固定的方法
示例
在store/index.js中，补充：
- 数据项url
- 更新数据项url的mutations
export default new Vuex.Store({
// state: 用来保存所有的公共数据
state: {
userInfo: {
name: 'tom',
skills: ['抖音', 'B站', '美团'],
address: '武汉黑马',
logo: 'https://vuejs.org/./images/logo.svg'
// https://www.runoob.com/wp-content/uploads/2016/02/react.png
}
},
// mutations: 用它提供修改数据的方法
// 中文是：变化，异动。
// 数据不应该在组件内部直接修改，必须在组件内调用mutations来修改
mutations: {
setLogo(state, newUrl) {
state.userInfo.logo = newUrl
}
}
}
在组件中，调用
const url = 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
this.$store.commit('changeUrl', url)
在devtool中观察
打开调试工具，查看效果
小结
mutations的中文含义是：变异。 它是Vuex中用来修改公共数据的唯一入口。
在定义时：
- 它的第一个参数是state，第二个参数是载荷
在调用时：
- 用 this.$store.commit('mutation名'， 载荷) 来调用
Vuex-mutaions拓展理解
问：为啥是$store.commit('mutations的名字')而不是$store.mutations的名字()?
答：Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
问：数据不可以该在组件内部直接修改吗？
答：不能。虽然语法上不报错，也有响应式的特点。但是不推荐。特别是在严格模式下会报错。若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作，只要不经过 mutation的函数，vue就会报错
问：可以传递多个数据吗？
答：参数只能有一个：下面的写法是不对的：
this.$store.commit('setUrl', url, host) // host这个参数将无法被接收到 如果希望传递复杂的数据，第二个参数可以是对象，例如下面的写法
this.$store.commit('setUrl', { url, host} )问：等价写法 this.$store.comit({type: 'mutations的名字'})
小案例-发请求取数据做保存
目标
综合使用axios, mutation, state
任务描述
我们希望在某组件创建成功之后：
- 请求后端接口（https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books）处获取数据
- 保存数据到state中
思路
组件created钩子函数中：
- 发ajax请求(用axios库)，获取数据
- 调用mutations保存数据到vuex
- 在组件中使用数据
代码
在app.vue（或者其他的组件）中，created钩子函数中的代码如下：
created() {
axios({
url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books',
method: 'GET'
}).then(res => {
console.log(res)
this.$store.commit('setBooks', res.data.data)
})
}
在src/store/index.js中，补充对应的数据项 books和操作的方法。
state: {
// 省略其他...
books: [] // 用来保存书
},
mutations: {
// 省略其他...
// 用来设置数据
setBooks(state, books) {
state.books = books
}
}
app.vue模板中 渲染数据
书目
{{book.name}}, {{book.price}}
总价为：XX元
Vuex-用getters的派生状态
目标
了解getters的作用； 掌握它的用法；
作用
在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)
例如：计算总价
new Vuex.store({
state: {
books: [
{
"name": "javasript技术内幕",
"price": 100,
"img": "https://img3m7.ddimg.cn/64/26/29120617-1_u_8.jpg"
},
{
"name": "数学之美",
"price": 44,
"img": "https://img3m2.ddimg.cn/18/30/28538352-1_b_5.jpg"
},
{
"name": "认知天性",
"price": 40,
"img": "https://img3m3.ddimg.cn/74/33/1732997153-3_u_3.jpg"
}
]
}
})
定义格式
new Vuex.store({
// 省略其他...
getters: {
// state 就是上边定义的公共数据state
getter的名字1: function(state) {
return 要返回的值
}
}
})
state 就是上边定义的公共数据state
使用格式
在组件中通过：$store.getters.getter的名字 来访问
在调试工具中查看
小结
它的作用是从已有公共数据项中派生出新的数据项，类似于computed
Vuex-state-mutation-getters 小结
vuex维护公共数据，主要有两个动作：
- 定义数据:
- 提供获取/修改数据的方法
Vuex-actions-发异步请求
导入
上面获取图书信息的方式是：
- 组件内部发ajax
- ajax回来之后，去调用mutations来保存到vuex中
这种方式有一个问题：代码不好重用
actions介绍
- actions是vuex的一个配置项
- 作用：发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部
- 要点：
- action 内部可以发异步请求操作
- action是间接修改state的：是通过调用 mutation来修改state
格式
定义格式
new Vuex.store({
// 省略其他...
actions: {
// context对象会自动传入，它与store实例具有相同的方法和属性
action的名字: function(context, 载荷) {
// 1. 发异步请求, 请求数据
// 2. commit调用mutation来修改数据
// context.commit('mutation名', 载荷)
}
}
})
调用格式
在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action
示例
修改上面例子中的发请求图书的代码，将axios的部分写到action中
// 发ajax请求，从后端获取数据，再来去修改state中的数据
actions: {
getBooks (context) {
// 1. 发异步请求
axios({
url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books',
method: 'GET'
}).then(res => {
console.log(res)
// 2. 调用mutation
context.commit('setBooks', res.data.data)
})
}
},
小结
action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据
将ajax请求放在actions中有两个好处：
- 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。
- 逻辑更通顺。如果数据需要保存在Vuex的state中，那从接口处获取数据的操作就定义在Vuex的actions中。
Vuex-用modules来拆分复杂业务
问题导入
随着项目越来越大，需要放在vuex中的数据越来越多，整个store/index.js中代码会越来越长，怎么办呢？
modules的作用
拆分模板，把复杂的场景按模块来拆开
格式
export default new Vuex.Store({
// state: 用来保存所有的公共数据
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
模块名1： {
// namespaced为true，则在使用mutations时，就必须要加上模块名
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
}，
模块名2： {
// namespaced不写，默认为false，则在使用mutations时，不需要加模块名
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
}
}
})
也可以更进一步对文件进行拆分。
|--store /
|------- index.js # 引入模块
|------- modules
|-------------- / mod1.js # 模块1
|-------------- / mod2.js # 模块2访问数据和修改数据的调整
- 访问模块中的数据，要加上模块名
获取数据项： {{$store.state.模块名.数据项名}}
获取getters： {{$store.getters['模块名/getters名']}} - 访问模块中的mutations/actions:
- 如果namespaced为true，则需要额外去补充模块名
- 如果namespaced为false，则不需要额外补充模块名
$store.commit('mutations名') // namespaced为false
$store.commit('模块名/mutations名') // namespaced为true
小结
使用了modules之后，在访问数据时就要额外添加modules的名字了。
结论： 在使用modules时，建议都给加上namespaced!
vuex-用modules之后代码结构优化
Vuex-辅助函数mapState来使用公共数据
目标
掌握mapState的用法，将state中的变量映射到当前的组件中使用；
问题
当访问某个数据项嵌套太深了，能不能优化一下访问的方式？
用mapState把公共数据（vuex.store） 映射 到本组件内部的计算属性中
mapState的使用步骤
映射
// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。
// es6 按需导入 import { mapState } from 'vuex'
import { mapState } from 'vuex'
computed: {
// 说明1： ...对象 是把对象展开，合并到computed
// 说明2： mapState是一个函数
// ['数据项1'， '数据项2']
...mapState(['xxx'])，
...mapState({'新名字': 'xxx'})
}
使用
this.xxx
{{xxx}}示例
// 步骤
// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。
// es6 按需导入 import { mapState } from 'vuex'
import { mapState } from 'vuex'
// 2. 在computed中使用 ...mapState(['books'])
// const res = mapState(['books'])
// res的结果是一个对象： { books: function() {}}
// console.log('mapState', res)
export default {
computed: {
c1 () {
return 'c1'
},
// books: function() {}
// ..res： 把res这个对象合并到computed对象中
// ...res
...mapState(['books'])
}
}
小结
- mapState是辅助函数，将vuex中的数据投射到组件内部；
- computed:{ ...mapState() } 这里的...是对象的展开运算符，整体来看是对象的合并。
Vuex-辅助函数mapState对数据重命名
目标
掌握mapState对数据重命名的用法。
场景
vuex中的数据与本组件内的数据名相同
格式
...mapState({'新名字': 'xxx'})Vuex-map函数用法汇总
如何使用全局state
- 直接使用： this.$store.state.xxx;
- map辅助函数：
computed: {
...mapState(['xxx']),
...mapState({'新名字': 'xxx'})
}
如何使用modules中的state
- 直接使用： this.$store.state.模块名.xxx;
- map辅助函数：
computed: {
...mapState('模块名', ['xxx']),
...mapState('模块名', {'新名字': 'xxx'})
}
如何使用全局getters
- 直接使用：
this.$store.getters.xxx - map辅助函数：
computed: { ...mapGetters(['xxx']), ...mapGetters({'新名字': 'xxx'}) }
如何使用modules中的getters
- 直接使用：
this.$store.getters.模块名.xxx - map辅助函数：
computed: {
...mapGetters('模块名', ['xxx']),
...mapGetters('模块名',{'新名字': 'xxx'})
}
如何使用全局mutations
- 直接使用：
this.$store.commit('mutation名', 参数) - map辅助函数：
methods: {
...mapMutations(['mutation名']),
...mapMutations({'新名字': 'mutation名'})
}
如何使用modules中的mutations（namespaced:true）
- 直接使用：
this.$store.commit('模块名/mutation名', 参数) - map辅助函数：
methods: {
...mapMutations('模块名', ['xxx']),
...mapMutations('模块名',{'新名字': 'xxx'})
}
如何使用全局actions
- 直接使用：
this.$store.dispatch('action名', 参数) - map辅助函数：
methods: {
...mapActions(['actions名']),
...mapActions({'新名字': 'actions名'})
}
如何使用modules中的actions（namespaced:true）
- 直接使用：
this.$store.dispatch('模块名/action名', 参数) - map辅助函数：
methods: {
...mapActions('模块名', ['xxx']),
...mapActions('模块名',{'新名字': 'xxx'})
}