Vue学习笔记（七）

Zzz小白飞

已于 2022-07-31 11:53:44 修改

阅读量271

点赞数

分类专栏： # Vue 文章标签： vue.js 学习前端 java

于 2022-07-28 23:25:50 首次发布

本文链接：https://blog.csdn.net/qq_45075124/article/details/126046187

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

点击跳转：Vue学习（一）

点击跳转：Vue学习（二）

点击跳转：Vue学习（三）

点击跳转：Vue学习（四）

点击跳转：Vue学习（五）

点击跳转：Vue学习（六）

点击跳转：Vue学习（八）

文章预览：

6、vuex

6.1、概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

6.2、何时使用？

1.多个组件依赖于同一状态(数据)

2.来自不同组件的行为需要变更同一状态(数据)

3.即多个组件需要共享数据时

全局事件总线实现多组件共享(对数据x读/写)：

在A组件中有一个数据x，B,C,D组件都想要得到他，需要绑定全局事件总线，在B,C,D中使用事件总线接收数据，在A中使用事件总线发送数据。这时如果

B,C,D想要更改数据x，在需要在A中使用事件总线接收数据，在B,C,D中使用事件总线提供数据。

在这里插入图片描述

vuex实现多组件共享(对数据x读/写):

vuex不属于最后一个组件，将很多组件都要使用的数据存储在vuex中，通过API的调用实现读写

在这里插入图片描述

6.3、vuex工作原理图

在这里插入图片描述

如图示，Vuex为Vue Components建立起了一个完整的生态圈，包括开发中的API调用一环。围绕这个生态圈，简要介绍一下各模块在核心流程中的主要功能：

Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
dispatch：操作行为触发方法，是唯一能执行action的方法。
actions（动作，行为）：操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发，是一个对象。
commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
mutations（加工，维护）：状态改变操作方法。是Vuex修改state的唯一推荐方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等，是一个对象。·
state（状态，数据）：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新，是一个对象。
getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

Vue组件接收交互行为，调用dispatch方法触发action相关处理，若页面状态需要改变，则调用commit方法提交mutation修改state，通过getters获取

到state新值，重新渲染Vue Components，界面随之更新。

6.4、搭建vuex环境

  安装：npm i vuex

创建文件：src/store/index.js

在这里插入图片描述

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

在main.js中创建vm时传入store配置项

......
//引入store
import store from './store/index'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

6.5、基本使用

Vue各方法求和案例

初始化数据、配置actions、配置mutations，操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写```commit`

6.6、getters的使用

Vue各方法求和案例

概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
在store.js中追加getters配置

......

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

组件中读取数据：$store.getters.bigSum

6.7、四个map方法的使用

Vue各方法求和案例

用之前需要引入
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

1.mapState方法：用于帮助我们映射state中的数据为计算属性

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
     //使用这个方法需要在点击函数中传参----看案例
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
     //使用这个方法需要在点击函数中传参----看案例
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

6.8、模块化+命名空间

Vue各方法求和案例

目的：让代码更好维护，让多种数据分类更加明确。
修改store.js

const countAbout = {
  namespaced:true,//开启命名空间，必需
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间，必需
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

export default new Vuex.Store({
 modules: {
 	countAbout: countOptions,
 	personAbout: personOption
 }
})

开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

Zzz小白飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记（七）

在A组件中有一个数据x，B,C,D组件都想要得到他，需要绑定全局事件总线，在B,C,D中使用事件总线接收数据，在A中使用事件总线发送数据。（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。B,C,D想要更改数据x，在需要在A中使用事件总线接收数据，在B,C,D中使用事件总线提供数据。vuex不属于最后一个组件，将很多组件都要使用的数据存储在vuex中，通过API的调用实现读写。，直接编写```commit`......
复制链接

扫一扫