Vue 状态管理工具-Vuex

边橙
715 阅读4分钟

简单学习 Vuex 及其使用

前言：用 Vue 的小伙伴对 Vuex 一定不陌生，vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。

一、Vuex 是什么？

image.png

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。

Vuex 是官方推荐的搭配，专属使用，专门的调试工具，是vue官方提供的独立于组件体系之外的，管理公共数据的工具，类似于 vue-router 这两者地位都很重要， Vuex 集中式管理数据状态方案，操作更简洁轻松，数据变化也是可预测的 也是响应式的。

image.png

二、Vuex 的使用

在项目目录，安装 Vuex 包

yarn add vuex

开发依赖：

yarn add vuex --save-dev

yarn add vuex -D

生产依赖：

yarn add vuex --save

yarn add vuex -S

yarn add vuex

实例化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

三、Vuex-state

state的作用

vuex用它来保存公共数据

定义公共数据

new Vuex.store({
  state: {
   属性名： 属性值 
  }
})

使用公共数据

格式：

在组件中，通过this.$store.state.属性名来访问。

在模板中，则可以省略this而直接写成： {{$store.state.属性名}}

image.png

vue-devtool调试工具

在调试工具中查看数据。

image.png

小结

state的作用是：保存公共数据（多组件中共用的数据）

state是响应式的： 如果修改了数据，相应的在视图上的值也会变化。

四、Vuex-mutations

Vuex-mutations的作用

作用：mutations 专门用来修改定义在state中的公共数据

image.png

定义格式

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)

小结：

mutations的中文含义是：变异。 它是Vuex中用来修改公共数据的唯一入口。

在定义时：

  • 它的第一个参数是state，第二个参数是载荷

在调用时：

  • 用 this.$store.commit('mutation名'， 载荷) 来调用

五、Vuex-getters

Vuex-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维护公共数据，主要有两个动作：

  1. 定义数据:
  2. 提供获取/修改数据的方法

image.png

七、Vuex-actions

Vuex-actions 的作用

主要用于发送异步请求，mutations 一大短板就是只能修改同步数据，不能处理异步请求，而 actions 的出现就弥补了这一短板。

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的名字', 参数)来调用actions

小结：

action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据

image.png

将ajax请求放在actions中有两个好处：

  1. 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。
  2. 逻辑更通顺。如果数据需要保存在Vuex的state中，那从接口处获取数据的操作就定义在Vuex的actions中。

八、Vuex-辅助函数mapState来使用公共数据

当访问某个数据项嵌套太深了，能不能优化一下访问的方式？

用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'])
  }
}
</script>

小结

  1. mapState是辅助函数，将vuex中的数据投射到组件内部；
  2. computed:{ ...mapState() } 这里的...是对象的展开运算符，整体来看是对象的合并。

九、Vuex-map函数用法汇总

image.png

如何使用全局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名'})
}

如何使用全局actions

  • 直接使用：this.$store.dispatch('action名', 参数)
  • map辅助函数：
methods: { 
  ...mapActions(['actions名']), 
  ...mapActions({'新名字': 'actions名'})
}

十、核心API总结

image.png

...END

avatar
文章
阅读
粉丝