vuex知识解析

淡淡的烟草味﹌ 2022-12-29 01:35 176阅读 0赞

### 文章目录 ###

*  VUEX知识解析
 *   *  Vuex是什么？
     *  使用Vuex有什么好处？
     *  Vuex有哪几种属性？
     *   *  1.state
         *  2.mapState 辅助函数
         *  3. ...mapState
         *  4.getters
         *  5. ...mapGetters
         *  6. Mutation
         *  7. mapMutations
         *  8.actions
         *  9. ...mapActions
         *  10. dispatch

# [VUEX知识解析][VUEX] #

## Vuex是什么？ ##

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。通俗地可以理解为是定义了一个全局对象，所有页面都可以访问。当你在state中定义了一个数据之后，你可以在当前项目中的任何一个组件里获取、修改该数据，并且你的修改可以让项目中所有引用该数据的地方都做出相应的变更。

## 使用Vuex有什么好处？ ##

1、共享状态：不同组件之间，可进行状态的修改和读取，方便统一管理、维护；

2、数据缓存：防止刷新页面后数据丢失，减少向服务器请求数据，节省资源；

3、单向数据流：数据统一管理，更加易于程序的稳定。

## Vuex有哪几种属性？ ##

有五种，分别是 State、 Getters、Mutations 、Actions、 Modules。

**State**：vuex的数据源，存放需要保存的数据，可通过 this.$store.state来获取state对象属性值。

**Getters**：类似vue中的computed计算属性。Getters返回值会根据依赖被缓存起来，且只有当依赖值发生了改变才会被重新计算。

**Mutations**：同步状态。建议只使用Mutations修改state属性值。

**Actions**：异步操作。Action 类似于mutation，但又不同于mutation，Action 提交的是 mutation，触发state属性值变更，不直接变更状态。

**Modules**：store的子模块，为了开发大型项目，方便状态管理而使用的。每个模块（module）拥有自己的State、Mutation、Action、Getter、甚至是嵌套子模块。

[Vuex入门（2）—— state,mapState,…mapState对象展开符详解][Vuex_2_ state_mapState_mapState]

### 1.state ###

vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新.

虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.如果你用data去接收$store.state,当然可以接收到值,但由于这只是一个简单的赋值操作,因此state中的状态改变的时候不能被vue中的data监听到,当然你也可以通过watch $store去解决这个问题,那你可以针是一个杠精

综上所述,请用computed去接收state

//state.js
    let state = {
      count: 1,
      name: 'dkr',
      sex: '男',
      from: 'china'
    }
    export default state

data () {
        return {
          dataCount: this.$store.state.count //用data接收
        }
      },
      computed:{
        count(){
          return this.$store.state.count //用computed接收
        }

### 2.mapState 辅助函数 ###

mapState是state的语法糖

实际作用:当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

在使用mapState之前,要导入这个辅助函数.

import { mapState } from 'vuex'

然后就是使用方式了

computed: mapState({
        count: 'count', // 第一种写法
        sex: (state) => state.sex, // 第二种写法
        from: function (state) { // 用普通函数this指向vue实例,要注意
          return this.str + ':' + state.from
        },
        // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
        // from: (state) => this.str + ':' + state.from
        myCmpted: function () {
          // 这里不需要state,测试一下computed的原有用法
          return '测试' + this.str
        }
      })

### 3. …mapState ###

…mapState并不是mapState的扩展,而是…对象展开符的扩展.当然如果你把他用在这里会发现他能使得代码看起来变得,更加符合常规逻辑了

computed:{
        //原来的继续保留
        fn1(){ return ...},
        fn2(){ return ...},
        fn3(){ return ...}
        ......
        //再维护vuex
        ...mapState({  //这里的...不是省略号了,是对象扩展符
            count:'count'
        })
    }

### 4.getters ###

getters相当于vue中的计算属性，通过getters进一步处理，得到我们想要的值，而且允许传参，第一个参数就是state

getters: {
            userLogin: (state) => state.userLogin
        },

### 5. …mapGetters ###

…mapGetters是mapGetters的扩展符，在vue中获取vuex的getting计算出的值

computed: {
                ...mapGetters({'userInfo': 'user/userLogin'})
            },

### 6. Mutation ###

类似于vue中的methods

mutations需要通过commit来调用其里面的方法，它也可以传入参数，第一个参数是state，第二个参数是载荷（payLoad），也就是额外的参数

mutations: { //类似于methods
      addAge(state,payLoad){
         state.age+=payLoad.number
      }
    }

### 7. mapMutations ###

跟mapState、mapGetters一样，在vue获取mutation中的方法

methods:{
     ...mapMutations(['addAge'])
    }

我为什么要绕一圈，从mutations里面去改state呢？我能不能直接改state呢？

原因如下：

*  在mutations中不仅仅能做赋值操作
 *  在mutations中做了类似埋点操作，如果从mutations中操作的话， 能被检测到，可以更方便用调试工具调试，调试工具可以检测到实时变化，而直接改变state中的属性，则无法实时监测

注意：mutations只能写同步方法，不能写异步，比如axios、setTimeout等，这些都不能写，**mutations的主要作用就是为了修改state的。**

原因类似：如果在mutations中写异步，也能够调成功，但是由于是异步的，不能被调试工具追踪到，所有不推荐这样写，不利于调试,这是官方的约定。

### 8.actions ###

action可以提交mutation

action也不要直接去操作state，而是去操作mutation

action包含异步操作，类似于axios请求，可以都放在action中写

action中的方法默认的就是异步，并且返回promise

store部分

actions: {
      getUserInfo(){
        return {
          nickname:'Simba',
          age:20
        }
      }
    }

在actions中定义一个方法：getUserInfo，并且返回一个对象

vue部分

created(){
      var res = this.getUserInfo()
      console.log(res)
     
    },
    methods:{
      ...mapActions(['getUserInfo'])
    }

### 9. …mapActions ###

在vue的methods中获取action中的方法

...mapActions(['setLanguageAction'])

mapActions(\[‘getUserInfo’\]) 相当于以下代码

getUserInfo(){
      return this.$store.dispatch(‘getUserInfo’)
    }

### 10. dispatch ###

执行一些查询的获取数据的action操作

created() {
          // 获取用户登录信息
          this.$store.dispatch('user/SET_GET_USERINFO');
          /* 获取公司信息 */
          this.$store.dispatch('common/GETCOMPANYINFO');
        },

[VUEX]: https://mp.weixin.qq.com/s?src=11&timestamp=1577677632&ver=2065&signature=7XzYvVh0rfOxGxWGj5YW8X2hNQTHtUvkl3C1JnovcO634Esuz1JvTl*fJNPl9AUrBZETpSkJfnDgurZWDDmZMkAsLxLFkjiOjC24aCsoXWKBNmVvMx8Hhs*RqkYbuDVA&new=1
[Vuex_2_ state_mapState_mapState]: https://blog.csdn.net/dkr380205984/article/details/82185740