目录
1、在模板中使用{ {$store.getters.属性名}}
(一)Vuex
(1)Vuex是什么
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式, 采用集中式存储管理应用的所有组件的状态,解决多组件数据通信。
(2)使用Vuex的好处
1、能够在vuex中集中管理共享的数据,易于开发和后期维护;
2、能够高效地实现组件之间的数据共享,提高开发效率;
3、存储在vuex的数据都是响应式的,能够实时保持数据与页面的同步;
(3)Vuex的五大分块
1、actions:发起异步请求
2、mutations:用来修改数据
3、state:统一定义公共数据
4、getters:对state中数据进行加工
5、modules:模块拆分
(4)Vuex的安装与环境搭建
1、在vscode终端输入 npm i vuex@3 (注意vue2对应vuex3 、vue3对应vuex4)
2、进行配置
(2.1)在src下创建store文件夹,在store中创建index.js文件
(2.2)在index.js中进行store配置
import Vue from 'vue'
// 该文件用于创建vuex中最为核心的部分store
// 引入vuex
import Vuex from 'vuex'
// 应该先用vuex再创建store,不能将其写在main.js中,因为import会提前store
Vue.use(Vuex)
// 准备actions-用于响应组建的动作
const actions={}
// 准备mutations-用于操作数据
const mutations={}
// 准备state-用于存储数据
const state={}
// 创建store 暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
(2.3)向Vue实例中注入store
在src/main.js中写入
// 引入store
import store from './store/index'
const vm=new Vue({
el:'#app',
render: h=>h(App),
// 注入Vue实例
store,
})
到此Vuex环境搭建成功,在任意组件中都存在$store
(二)Vuex-state定义公共数据并在组件中使用
(1)什么是Vuex-state
State 本质上就是 Object 对象
state的作用是:保存公共数据(多组件中共用的数据)
state是响应式的: 如果修改了数据,相应的在视图上的值也会变化。
(2)访问state数据中的方式
公共数据state中的数据格式
// 准备state-用于存储数据
const state={
// 用于记录和
sum:0,
school:'河科大',
subject:'前端'
}
1、在模板中使用{ {$store.state.属性名}}
<template>
<h3>当前求和为:{ {$store.state.sum}}</h3>
<template>
2、用mapState
当state中的数据过多时,根据简单模板数据原则,每使用一个数据都采用{ {$store.state.属性名}}的话较为麻烦,可以改写为计算属性,直接在模板中使用属性名
(2.1)、引入mapState
import {mapState} from 'vuex'
(2.2)、computed中配置mapState,可以有两种写法
computed:{
// 自动生成,...是展开运算符,从state中读取数据
...mapState({sum:'sum',school:'school',subject:'subject'}),
// 简写成数组的形式,生成的计算属性名和真正读取的名必须一致
...mapState(['sum','school','subject']),
},
(2.3)、模板中进行读取
<h3>当前求和为:{ {sum}}</h3>
<h3>我在{ {school}},学习{ {subject}}</h3>
(三)Vuex-getters定义数据并在组件中使用
(1)什么是Vuex-getters
它是 Vuex 中的计算属性,当 Store 数据源发生变化时,Getter 的返回值会自动更新。
(2)访问getters中数据的方式
getters中的数据
// getters用于将state中的数据进行加工
const getters={
bigSum(state){
return state.sum*10
}
}
1、在模板中使用{ {$store.getters.属性名}}
<h3>放大10倍后的值:{ {$store.getters.bigSum}}</h3>
2、用mapGetters
(2.1)、引入mapGetters
import {mapState,mapGetters} from 'vuex'
(2.2)、computed中配置mapGetters,可以有两种写法
//和mapState使用方法一样
// ...mapGetters({bigSum:'bigSum'})
...mapGetters(['bigSum'])
(2.3)、模板中进行读取
<h3>放大10倍后的值:{ {bigSum}}</h3>
(四)Vuex-mutations修改公共数据
(1)什么是mutations
Mutation 本质上是JavaScript 函数,专门用来变更Store 中的数据
特点:想要修改State 中的数据,只能调用Mutation 方法,它是Vuex中用来修改公共数据的唯一入口。
好处:能够确保修改来源的唯一性,方便调试和后期维护。
在定义时:它的第一个参数是state,第二个参数是载荷
在调用时:用 this.$store.commit('mutation名', 载荷) 来调用
注意:Mutation 必须是同步函数,Mutation 里面不能放异步代码
(2)如何使用mutations
定义格式
new Vue.store({
// 准备mutations-用于操作数据
const mutations={
// 每一项都是一个函数,mutation名:function(state [, 载荷]){},此时写的函数为了实现 // 加减的功能,value为要加和减的值,state是必须要传入的
JIA(state,value){
state.sum+=value
},
JIAN(state,value){
state.sum-=value
},
JIAODD(state,value){
state.sum+=value
}
}
}
1、this.$store.commit('mutation名', 实参)
当没有多余的操作时可以直接到mutations跳过actions
add(){
// 根据图示例,vue需要先调用dispatch,再到vux里面写actions
this.$store.commit('JIA',this.number)
},
reduce(){
this.$store.commit('JIAN',this.number)
},
2、methods方法中使用mapMutations
和前面的getters和state类似,先引入-再使用
// 借助mapMutations生成对应的方法,方法中会调用commit去练习mutations
...mapMutations({add:'JIA',reduce:'JIAN'}),
// 数组写法,方法名和commit中提交的名一样,模板中也进行修改
...mapMutations(['JIA','JIAN']),
注意:模板中的使用需要为函数传入要使用的值number,否则会报错
<button @click='add(number)'>+</button>
<button @click='reduce(number)'>-</button>
(五)Vuex-actions-发异步请求
(1)什么是actions
Action 本质上是 JavaScript 函数,专门用来处理 Vuex 中的异步操作
actions是vuex的一个配置项
作用:发异步请求获取数据,调用mutations来保存数据,将整个ajax操作封装到Vuex的内部
要点:
- action 内部可以发异步请求操作
- action是间接修改state的:是通过调用 mutation来修改state
(2)actions的使用
定义格式
// 准备actions-用于响应组建的动作,其是响应当前数为奇数时进行加,和延迟加
//actions的名字(缩减版的store,载荷){}
const actions={
jiaOdd(miniStore,value){
if(miniStore.state.sum%2){
miniStore.commit('JIA',value)
}
},
jiaWait(miniStore,value){
setTimeout(()=>{
miniStore.commit('JIA',value)
},500)
}
}
1、在组件中通过this.$store.dispatch('actions名',参数)来调用actions
addOdd(){
this.$store.dispatch('jiaOdd',this.number)
},
addWait(){
// 都是jia可以 采用一个
this.$store.dispatch('jiaWait',this.number)
}
2、通过mapActions
使用方法与Vuex-mutations完全类似