vuex
一、概念：专门为Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写，也是一种组件间通信的方式，且适用于任意组件间通信）
全局事件总线实现多组件共享数据
vuex实现多组件共享数据
2、什么时候使用vuex
①多个组件依赖于同一状态
②来自不同组件的行为需要变更同一状态
二、vuex的原理
三、搭建vuex环境
1、安装 npm i vuex@3
vue2中，要用vuex的3版本
vue3中，要用vuex的4版本
①方式一：在src中创建一个名为vuex的文件夹，里面新建一个store.js
②官方文档中，在src中创建一个名为store的文件夹，然后在里面新建一个index.js
2、创建文件：src/store/index.js
index.js
// 该文件用于创建vuex中最为核心的store
// 引入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: actions,
mutations: mutations,
state: state
})
4、在main.js中创建vm时引入store配置项
import store from './store/index'
然后配置store
new Vue({
el: '#app',
render: h => h(App),
store: store,
beforeCreate() {
Vue.prototype.$bus = this
},
})
备注：之所以没有在main.js中引入vuex并使用，是因为vue会自动扫描整个文件中的import，然后先引入，在引入store的时候，还未使用vuex插件，所以会报错。
四、基本使用
1、初始化数据、配置actions、配置mutations，操作文件store.js
//引入Vue核心库
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)
// 准备actions-----用于响应组件中的动作
const actions = {
//响应组件中加的动作
// 这里的context是一个不完整的store
//一下两个函数jia和jian在这里是可以省略，直接在组件中commit
jia(context, value) {
context.commit('JIA', value) //将jia变为JIA以做区别
},
jian(context, value) {
context.commit('JIAN', value)
},
jiaOdd(context, value) {
if (context.state.sum % 2) {
context.commit('JIA', value) //将jia变为JIA以做区别
}
},
jiaWait(context, value) {
setTimeout(() => {
context.commit('JIA', value) //将jia变为JIA以做区别
}, 500)
},
}
// 准备mutations-----用于操作数据(state)
const mutations = {
//执行加
JIA(state, value) {
state.sum += value
},
JIAN(state, value) {
state.sum -= value
}
}
// 准备state-----用于存储数据
//初始化数据
const state = {
sum: 0,
}
// 创建并暴露store
export default new Vuex.Store({
actions: actions,
mutations: mutations,
state: state
})
2、组件中读取vuex中的数据：$store.state.sum（如果在模板中写不用加this,如果在js脚本中写需要加this）
3、组件中修改vuex中的数据：$store.dispatch('actions中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
Count.vue
methods: {
increment() {
// 直接和mutations对话
this.$store.commit('JIA', this.n)
},
decrement() {
this.$store.commit('JIAN', this.n)
},
incrementOdd() {
this.$store.dispatch('jiaOdd', this.n)
},
incrementWait() {
this.$store.dispatch('jiaWait', this.n)
}
},
备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions,即不写dispatch，直接编写commit
五、getters的使用
1、概念：当state中的数据需要经过加工后再使用，可以使用getters加工
2、在store/index.js中追加getters配置
// 准备mutations-----用于将state中的数据进行加工
const getters = {
bigSum(state) {
return state.sum * 10
}
}
// 创建并暴露store
export default new Vuex.Store({
actions: actions,
mutations: mutations,
state: state,
getters
})
3、组件中读取数据：$store.getters.bigSum
六、四个map方法的使用
1、mapState方法：用于帮助我们映射state中的数据为计算属性
computed: {
//靠程序员自己亲自写计算属性
sum() {
return this.$store.state.sum
},
subject() {
return this.$store.state.subject
},
school() {
return this.$store.state.school
},
// 将一个对象放进另一个对象中加... 不加就出错了
// 借助mapState生成计算属性，从state中读取数据（对象写法）
...mapState({sum: 'sum', school: 'shcool', subject: 'subject' }),
// 借助mapState生成计算属性，从state中读取数据。（数组写法）
/* 如果想要用这种数组形式，要考虑自动生成的计算属性的名要和真正读取出来的名相同，
这里就不能使用'he','xuexiao'这样的名，因为没有$store.state.he,state中没有叫he的属性名 */
...mapState(['sum', 'shcool', 'subject']),
}
2、mapGetters方法：用于帮助我们映射getters中的数据为计算属性
computed:{
//靠程序员自己亲自写计算属性
bigSum() {
return this.$store.getters.bigSum
},
// 第一种 借助mapGetters生成计算属性，从getters中读取数据(对象写法)
...mapGetters({ bigSum: 'bigSum' })
// 第二种 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
...mapGetters(['bigSum'])
},
3、mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
methods：{
//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
...mapActions({ incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' })
//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组写法）
...mapActions(['jiaOdd', 'jiaWait'])
}
4、mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
methods:{
// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法）
...mapMutations(['JIA', 'JIAN']),
}
备注：mapActions与mapMutations使用时，如果需要传递参数，要在模板中绑定事件时传递好参数，否则参数是事件对象
<!--这里需要传递一个参数n -->
<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">当前求和为奇数再加</button>
<button @click="incrementWait(n)">等一等再加</button>
七、模块化+命名空间
1、目的：让代码更好维护，让多种数据分类更加明确。
2、修改store.js
//count.js
const countAbout = {
// 如果不写下面这行会报错[vuex] module namespace not found in mapState(): countAbout/
namespaced: true, //开启命名空间
state:{......},
mutations:{......},
actions:{......},
getters:{
bigSum(state) {
return state.sum * 10
}
}
}
//person.js
const personAbout = {
namespaced: true, //开启命名空间
state:{......},
mutations:{......},
actions:{......},
}
//index.js
const store = Vuex.Store({
modules: {
countAbout,
personAbout
}
})
3、开启命名空间后，组件中读取state数据：
//方式一：自己直接读取
this.$store.state.personAbout.personList
this.$store.state.countAbout.sum
//方式二：借助mapState读取
...mapState('countAbout', ['sum', 'school', 'subject']),
4、开启命名空间后，组件中读取getters数据：
//方式一：自己直接读取
// 取对象中的属性的时候，使用.语法就不能够有斜线，因此换成下面这种写法 ['字符串']
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取
...mapGetters('countAbout', ['bigSum'])
5、开启命名空间后，组件中调用dispatch
//方式一：自己直接dispatch
const personObj = { id: nanoid(), name: this.name } //从输入框中获得数据
this.$store.dispatch('personAbout/addPersonMa', personObj)
//方式二：借助mapActions
...mapActions('countAbout', { incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' })
6、开启命名空间后，组件中调用commit
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON', personObj)
//方式二：借助mapMutations
...mapMutations('countAbout', { increment: 'JIA', decrement: 'JIAN' }),
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
1352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
