vuex基础总结

作者: 踏莎行 | 来源:发表于2021-08-10 21:28 被阅读0次

vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。

Snipaste_2021-08-10_10-22-21.png

上面的例子只是一个简单的组件间通信的例子，在实际项目中，组件间的通信往往比这要复杂的很多，所以说当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏
而vuex就是将所有状态集中管理起来，更加方便的实现组件间的通信，以往要实现数据的传递需要一步一步的向上传递，有了vuex，所有组件都可以向vuex中存数据，也可以取数据

Snipaste_2021-08-10_10-28-39.png

应用vuex的好处

能够集中管理共享的数据，易于开发和后期的维护
高效的实现组件之间的数据共享，提高开发效率
存在vuex的数据也是响应式的，能够实时保持数据与页面的同步

应用场景

多个组件共享数据或者是跨组件传递数据时

vuex基本使用

安装

npm i vuex

导入vuex

import Vuex from 'vuex'
Vue.use(Vuex)

创建store对象

const store = new Vuex.Store({
  state: {
      // 存放全局共享的数据
  },
  actions: {},
  mutatiions: {},
  getters: {}
})

全局挂载store到vue上

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

然后在组件中就可以通过this.$store访问到vuex了

vuex核心概念

一、state

state作为唯一的数据源，所有的共享数据都存放在state中，如：

const store = new Vuex.Store({
  state: {
      count: 0
  }
})

组件访问state数据的方式

通过已经挂载到vue实例上的store对象

 this.$store.state.count

2.mapState辅助函数，当需要访问的状态有多个时，上面的方式就略显麻烦，代码冗余，vuex提供了mapState函数解决这个问题
在组件中先从vuex中导入mapState函数

import {mapState} from "vuex"

通过mapstate函数，和展开运算符将当前组件所需要的全局数据映射成当前组件的computed计算属性,函数传递一个数组，这种最常用，你想要什么数据，就传入该数据的名称，这个名称也将作为该组件的一个计算属性使用

computed: {
  ...mapState(['count'])
}
// 使用展开运算符在这里必须用{}包起来
// 如果当前组件没有私有的计算属性，可以直接简写成
computed: mapState(['count'])

Snipaste_2021-08-10_11-38-20.png

另一种方法就是传入配置对象

// 如果当前组件没有私有的计算属性，可以直接简写成
computed: mapState({})
// 有私有的计算属性,不能简写
computed: {
  ...mapState({
      // 函数方法有一个参数state，就是数据源
      aaa(名字自定义): state => state.count
      // 简写
      aaa: 'count' // 传字符串的方式等同于state => state.count
      // 若要访问组件的this，就得写成普通函数
      aaa(state){
        // 必须return
        return this.num + state.count
      }
  })
}

二、mutations

vuex不允许在组件中修改state中的状态，如果想要修改state的数据，唯一的方法就是通过mutations修改，其实在组件中是可以直接修改的，但是这样通过mutations修改的方式，可以更加集中的监控所有数据的变化。
在mutations中定义一些修改state数据的方法，方法第一个参数就是state对象

mutations: {
  add(state){
    state.count ++
  }
}

（1）触发mutation的方法

通过store对象

this.$store.commit('add')

Snipaste_2021-08-10_13-13-41.png

Snipaste_2021-08-10_13-15-17.png

mapMutations映射
组件中导入mapMutations函数

import {mapMutations} from 'vuex'

这次是在组件的methods中，将mutation映射成methods的方法

methods: {
  ...mapMustations(['add'])
}

Snipaste_2021-08-10_13-53-31.png

（2）mutation传值（官网将传递的值称为载荷）
对于mutaion而言，方法接受的第一个参数始终是自身的state，第二个才是传递过来的参数，这个参数一般是一个对象，因为对象可以携带更多的数据。当然只有一条数据可以只传递这条数据

mutations: {
  add(state, param){
    state.count += param.xxx
  }
}

Snipaste_2021-08-10_13-33-16.png

还可以写成一种对象的方式

this.$store.commit({
  type: add,
  step: 20
});

// mutation的写法不变

mapMutations传值

Snipaste_2021-08-10_17-48-19.png

（3）注意

一般我们会将mutation的名字写成是全大写和“_”,如

mutations: {
  SET_TOKEN(state){},
  RECEIVE_CATE_LIST(state){}.
  ...
}

方法中不能执行异步操作，也不能执行if语句

Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
引自「水墨-青花」:https://blog.csdn.net/lovemyself196221/article/details/105488288

大多数情况下也不是在组件中触发，而是通过actions中的方法触发mutation

三、actions

actions和mutations类似，不同的是，actions是提交mutation修改共享数据，不是直接改变共享数据的，只有通过mutation才能修改state中的函数；actions中可以执行异步操作。actions中的每一个方法的第一个参数默认使context，是与 store 实例具有相同方法和属性的对象（context !== store对象）。而在组件中执行actions方法的方式就是：this.$store.dispatch('方法名')
比如定义一个定时器异步的使count自增

actions: {
  async asyncIncrement(context){
    console.log(context)
  }
}

Snipaste_2021-08-10_18-33-26.png

而提交mutation的方法是commit，利用解构赋值将commit结构出来，提交mutation修改state的值

Snipaste_2021-08-10_18-37-39.png

分发actions
说白了就是触发actions中的方法

this.$store.dispatch("xxx")

2.mapActions,映射在组件的methods中

 methods: {
    ...mapActions(['asyncIncrement']) // 将asyncIncrement映射成methods中的一个方法
 }

 methods: {
    // 若要自定义方法名
    ...mapActions({
      newMethodName(){
        this.$store.dispatch("asyncIncrement");
      }

       //或者
       newMethodName:  "asyncIncrement"
    }) 
 }

传递载荷（参数）
1.dispatch

 this.$store.dispatch('xxx', params)
 // 对象形式
 this.$store.dispatch({
   type: asyncIncrement,
   params
 })

Snipaste_2021-08-10_19-47-17.png

2.mapActions

Snipaste_2021-08-10_19-49-43.png

四、getters

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤等，其实也可以理解为是类似vue的计算属性，函数接受一个参数state,也就是数据源，数据也是响应式的，state数据变化。getters里面的数据也会随之变化，不会修改state中的数据,第二个参数是getters，通过这个属性我们就可以访问到其他的getter了

定义getter

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    nameList: [
      {
        title: "标题一",
        id: 1
      },{
        title: "标题二",
        id: 2
      },{
        title: "标题三",
        id: 3
      }
    ]
  },

  getters: {
    numArr: (state, getters) => {
      console.log(getters.testGetters) // {a: 2}
      return state.nameList.filter((item) => {
        return item.num > 11
      })
    }，

    testGetters: () {
      return {a: 2}
    }
  }
})

组件中访问getters中的属性
其实和state差不多，就不多说了

this.$store.getters.getterName

this.$store.getters.numArr

mapGetters

import { mapGetters } from "vuex";

// 同state一样，将getters中的getter映射成组件的computed的计算属性
export default {
  computed: {
    ...mapGetters(['numArr'])
    // 重命名
    ...mapGetters({
      newName: 'numArr'
    })
  },
};

下一节：vuex模块化

网友评论

本文标题：vuex基础总结

本文链接：https://www.haomeiwen.com/subject/fcsxbltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！