vuex知识点

冷不防 2021-09-14 05:46 452阅读 0赞

`Vuex` 是一个专为 `Vue.js` 应用程序开发的状态管理模式；集中存储和管理应用的所有组件状态。

*  状态：什么是状态，我们可以通俗的理解为数据。[Vue只关心视图层][Vue]，那么视图的状态如何来确定？我们知道是通过数据驱动，这里的状态管理可以简单理解为管理数据。
 *  集中存储：`Vue`只关心视图，那么我们需要一个仓库（`Store`）来存储数据，而且是所有的数据集中存储，视图和数据就可以分析。
 *  管理：除了存储，还可以管理数据，也就是计算、处理数据。
 *  所有组件状态：所用的组件**共用一个仓库**（`Store`），也就是一个项目只有一个数据源（区分模块`modules`）。
 *  总结：**Vuex就是在一个项目中，提供唯一的管理数据源的仓库**。

`Vuex`将组件公用数据抽离，在一个公共仓库管理，使得各个组件容易获取（`getter`）数据，也容易设置数据（`setter`） 。

Store

`Store` 仓库里面放了很多对象。 **其中`state`就是数据源存放地** ，对应于与一般 `Vue` 对象里面的 `data` （后面讲到的 `actions` 和 `mutations` 对应于 `methods` ）。

*  在使用`Vuex`的时候通常会**创建`Store`实例**`new Vuex.store({state,getters,mutations,actions})`有很多子模块的时候还会使用到`modules`。
 *  ![bVMlY5_w_478_h_304][]![bVMlY5_w_478_h_304][]![bVMlY5_w_478_h_304][]![Center][]
 *  总结，`Store`类就是存储数据和管理数据方法的仓库，实现方式是**将数据和方法以对象形式传入其实例**中。要注意一个应用或是项目中只能存在一个`Store`实例！！

state

**响应式存储**：`state`里面存放的数据是响应式的，`Vue`组件从`store`中读取数据，若是`store`中的数据发生改变，依赖这个数据的组件也会**发生更新**。（这里“状态”=“数据”），也就是是说**数据和视图是同步的**。

*  获取：在`Vue`组件中获取数据，最直接的可以通过**计算属性中获取**；
 *  组件仍然可以保存**局部状态**：虽然说`Vuex`的`Store`仓库让我们同一管理数据变得更加方便，但是代码一多也会变得冗长，有些组件的数据是自己严格自用，我们可以将`state`放在组件自身，作为局部数据，专供此组件使用，其他的组件不能用。

*  `mapState`的作用是把全局的 `state` 和 `getters` 映射到当前组件的 `computed` 计算属性中，`this.$store.state`。
 *  使用示例

import {mapState} from 'vuex' 
     export default {
      computer :
      mapState({
       count: state => state.count,
        'count' // 映射 this.count 为 store.state.count
      })
    }

getters

在 `Store` 仓库里， `state` 就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到 `computed` 中。但是如果很多组件都

使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是`getters`存在的意义。

我们可以认为，【getters】是store的计算属性。

*  定义：我们可以在`store`中定义`getters`，第一个参数是state
    
        const getters = {style:state => state.style}
 *  传参：定义的`Getters`会暴露为`store.getters`对象，也可以接受其他的`getters`作为第二个参数；
 *  使用：
    
        computed: {
        doneTodosCount () {
            return this.$store.getters.doneTodosCount}

`mapGetters`辅助函数仅仅是将`store`中的`getters`映射到局部计算属性中，用法和`mapState`类似

import { mapGetters } from 'vuex'

computed: {
       // 使用对象展开运算符将 getters 混入 computed 对象中
        ...mapGetters([
        'doneTodosCount',
        'anotherGetter',])}
     //给getter属性换名字
      mapGetters({
     // 映射 this.doneCount 为 store.getters.doneTodosCount
      doneCount: 'doneTodosCount'
    })

## `Mutations` ##

*  `getters`是为了初步获取和简单处理`state`里面的数据(这里的简单处理不能`改变` `state`里面的数据)，`Vue`的视图是由数据驱动的，也就是说`state`里面的数据是动态变化的，那么怎么改变呢，切记在`Vuex`中`store`数据改变的唯一方法就是`mutation`！
 *  通俗的理解`mutations`,里面装着一些改变数据方法的集合，这是`Veux`设计很重要的一点，就是把处理数据逻辑方法全部放在`mutations`里面，使得数据和视图分离。

使用方法如下

*  mutation结构：每一个`mutation`都有一个**字符串类型**的事件类型(`type`)和回调函数(`handler`)，也可以理解为`{type:handler()}`,这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用`handker()`，调用`type`的时候需要用到`store.commit`方法。
    
        const store = new Vuex.Store({
            state: {
                count: 1
                },
            mutations: {
            increment (state) {      //注册事件，type:increment，handler第一个参数是state；
                 // 变更状态
               state.count++}}})
               
            store.commit('increment')   //调用type，触发handler（state）
 *  载荷（payload）:简单的理解就是往`handler(stage)`中传参`handler(stage,pryload)`；一般是个对象。
    
        mutations: {
         increment (state, n) {
             state.count += n}}
         store.commit('increment', 10)
 *  mutation-types：将常量放在单独的文件中，方便协作开发。
    
        // mutation-types.js
         export const SOME_MUTATION = 'SOME_MUTATION'
            // store.js
        import Vuex from 'vuex'
        import { SOME_MUTATION } from './mutation-types'
        
          const store = new Vuex.Store({
            state: { ... },
            mutations: {
             // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
            [SOME_MUTATION] (state) {
            // mutate state
          }
        }
        })
 *  commit：提交可以在组件中使用 `this.$store.commit('xxx')` 提交 `mutation`，或者使用 `mapMutations` 辅助函数将组件中的 `methods` 映射为 `store.commit` 调用（需要在根节点注入 `store`）。
    
        import { mapMutations } from 'vuex'
        
        export default {
        
        methods: {
          ...mapMutations([
            'increment' // 映射 this.increment() 为 
        this.$store.commit('increment')]),
          ...mapMutations({
            add: 'increment' // 映射 this.add() 为 
        this.$store.commit('increment')
          })}}

## `Actions` ##

*  背景：在`mutation`中我们讲到，`mutation`中是存放处理数据的方法的集合，我们使用的时候需要`commit`。但是`commit`是同步函数，而且只能是同步执行。那我们想一步操作怎么办？
 *  作用：在`actions`中提交`mutation`，并且可以包含任何的异步操作。`actions`可以理解为通过将`mutations`里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过`mutation`来操作，因为只有它能操作）

怎么用 `actions：`

*  定义`actions`
    
        const store = new Vuex.Store({//创建store实例
              state: {
                 count: 0
                     },
              mutations: {                
                 increment (state) {
                  state.count++
                 }
                  },
              actions: {         //只是提交`commit`了`mutations`里面的方法。
                 increment (context) {
                  context.commit('increment')
           }
         }
            })
           
          一般我们会简写成这样
          actions: {
           increment ({ commit }) {
                 commit('increment')
              }
                 }
 *  分发`actions`
    
        store.dispatch('increment')
 *  MapActions和MapState一级MapMutations类似。

## `Modules` ##

*  背景：在`Vue`中`State`使用是单一状态树结构，应该的所有的状态都放在`state`里面，如果项目比较复杂，那`state`是一个很大的对象，`store`对象也将对变得非常大，难于管理。
 *  `module`：可以让每一个模块拥有自己的`state`、`mutation`、`action`、`getters`,使得结构非常清晰，方便管理。

*  一般结构
    
        const moduleA = {
         state: { ... },
         mutations: { ... },
         actions: { ... },
         getters: { ... }
         }
        const moduleB = {
         state: { ... },
         mutations: { ... },
         actions: { ... }
         }
        
        const store = new Vuex.Store({
         modules: {
         a: moduleA,
         b: moduleB})
 *  模块内部的数据：①内部`state`，模块内部的`state`是局部的，也就是模块私有的，比如是`car.js`模块`state`中的`list`数据，我们要通过`this.$store.state.car.list`获取；②内部`getter`、`mutation`和`action`，仍然注册在全局命名空间内，这是为了多模块可以同时响应同一`mutation`；`this.$store.state.car.carGetter`的结果是`undefined`，而通过`this.$store.state.carGetter`则可以拿到。
 *  传参：`getters`====(\{ `state`(局部状态),`getters`（全局`getters`对象）,`roosState`（根状态）\})；`actions`====(\{ `state`(局部状态),`commit`,`roosState`（根状态）\}).

[Vue]: https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88
[bVMlY5_w_478_h_304]: https://segmentfault.com/img/bVMlY5?w=478&h=304
[Center]: /images/20210813/fcd8b39cbb864d02a3f78333f660680a.png