为什么要用 vuex ？
首先，需要清楚为什么要用 vuex ，当我们的应用遇到 **多个组件共享状态** 时
- 多层级父子组件状态传递会特别繁琐
- 非嵌套父子组件状态传递也会特别繁琐
vuex
Vuex 是一个专为 Vue.js 应用程序开发的 **状态管理模式**，类似 redux
这种状态管理模式包含：
这种模式遵循的是 单向数据流 模式
vuex 的工作流
Actions和Mutations可以说成是一个差不多的
安装 vuex
npm i vuex
// or
yarn add vuex
引入 vuex
通过 `import` 引入
通过 `import` 方式引入，需要手动安装（手动调用 `Vue.use(Vuex)`）
通过 \<script\> 引入
通过 \<script\> 方式引入，vuex 会自动安装（也就是主动调用 `Vue.use(Vuex)`）
从 Store 开始
`Store` 就是仓库，我们前面提到的 `state` 就存储在 `store` 中，同时提交动作、修改状态的方法也都由 `store` 提供和管理
创建一个 Store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {}
})
必须在 `Vue.use(Vuex)` 之后创建 `store`
核心概念
- state
- getters
- actions
- mutations
state
state 的创建
存储应用状态数据的对象，`state` 的值可以是一个对象，也可以是一个返回对象的函数，类似 vue 中组件的 `data` ，使用函数的方式
返回对象可以避免对象引用导致的副作用问题
通过 `store.state` 访问状态数据
`state` 数据与组件 `data` 一样是被追踪的
在组件中使用 store
问题： `state` 的更新并不会更新视图
解决
用computed（计算属性）
computed计算属性
<template>
<div class="home">
<h2>{{title}}</h2>
<div>{{content}}</div>
</div>
</template>
<script>
import store from '@/stores'
export default {
name: 'home',
computed: {
title() {
return store.state.title
},
content() {
return store.state.content
}
}
}
</script>
store 配置
如果每个组件在使用 `store` 的时候都 `import` 会比较繁琐，这个时候，我们通过 vuex 提供的 `store` 选项把 `store` 对象注入
到 vue 的原型上
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/stores'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
配置注入后，我们就可以在组件实例中使用 `this.$store` 来访问 `store` 对象了
使用辅助函数 `mapState`
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 `mapState`
辅助函数帮助我们生成计算属性，让你少按几次键，通常我们把 `store` 的 `state` 通过 `mapState` 函数映射到组件的 `computed` 上
通过对象方式进行映射
场景：当组件中已有与 `store` 同名的数据名称
使用扩展运算符组合
通过对象扩展运算符，可以把 `mapState` 返回的 `state` 属性与组件已有计算属性进行融合
getters
有时候我们需要从 store 中的 state 中派生出一些状态，类似组件的 `data` 与 `computed`，`store` 也提供了一个 `getters` 对象来处理
派生数据
getters 函数
与组件属性一样，我们是通过定义一个函数的形式来返回派生数据的，` getters` 函数接受两个参数
- 第一个参数：`state` 对象
- 第二个参数：`getters` 对象
通过属性访问
同样的，与组件计算属性一样，默认是通过属性的方式去访问 `getters` 中的数据的，这种方式与组件的计算属性一样，
也是会缓存 结果的
通过方法访问
我们还可以通过闭包函数的形式返回一个函数，来实现给 `getters` 函数传参，需要注意的是这种方式不支持结果缓存
使用辅助函数 `mapGetters`
与 `mapState` 函数类似，通常映射到组件的 `computed` 上
mutations（改变）
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation（类似 redux 中的 action + reducer），Vuex 中的 mutation 非常类似于事件：
每个 mutation 都有一个字符串的 **事件类型 (type)** 和 一个 **回调函数 (handler)**
`mutation` 中的函数不要直接调用
commit（提交）
type
要提交的 `mutation` 回调函数名称
payload
载荷：提交的额外数据，任意格式
mutation 函数
`mutation` 中的函数被 `commit` 执行的时候，接收两个参数
- 第一个参数：`state` 对象
- 第二个参数： `commit` 提交的 `payload`
在 `mutation` 函数中，我们就可以通过 `state` 对象进行状态数据的修改
使用辅助函数 `mapMutations`
`mapMutations` 函数的使用与 `mapState` 和 `mapGetters` 类似，但是其一般是把组件的 `methods` 映射
为 `store` 的 `mutations` 的 `commit` 调用
mutation 函数必须是同步的
`commit` 方法没有返回值
actions
`action` 中的函数与 `mutation` 中的函数类似，但是它主要用来进行异步任务的处理，然后通过提交 `mutation` 来修改 `state`
> 注意：`action` 中的函数不要直接修改 `state`
dispatch派发
`action` 任务需要通过 `dispatch` 方法来提交（派发），与 `commit` 类似
`dispatch` 方法有返回值，且一定返回一个 `promise` 对象
action 函数
`action` 中的函数执行的过程中也接受两个参数
- 第一个参数：`store` 对象
- 第二个参数： `dispatch` 提交的 `payload`
使用辅助函数 `mapActions`
与 `mapMutations` 函数类似，把组件的 `methods` 映射为 `store` 的 `actions` 的 `dispatch` 调用
Module
这个更多的是基于一种代码组织结构上的辅助
https://vuex.vuejs.org/zh/guide/modules.html
https://vuex.vuejs.org/zh/guide/structure.html
网友评论