Vuex搭建与使用
目录
（一）Vuex
（1）Vuex是什么
(2)使用Vuex的好处
（3）Vuex的五大分块
（4）Vuex的安装与环境搭建
(二）Vuex-state定义公共数据并在组件中使用
（1）什么是Vuex-state
（2）访问state数据中的方式
2、用mapState
（三）Vuex-getters定义数据并在组件中使用
(1)什么是Vuex-getters
(2)访问getters中数据的方式
1、在模板中使用{{$store.getters.属性名}}
2、用mapGetters
(四）Vuex-mutations修改公共数据
（1）什么是mutations
（2）如何使用mutations
（五）Vuex-actions-发异步请求
（1）什么是actions
（2）actions的使用
（一）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完全类似