vuex是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。
上面的例子只是一个简单的组件间通信的例子，在实际项目中，组件间的通信往往比这要复杂的很多，所以说当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏
而vuex就是将所有状态集中管理起来，更加方便的实现组件间的通信，以往要实现数据的传递需要一步一步的向上传递，有了vuex，所有组件都可以向vuex中存数据，也可以取数据
应用vuex的好处
- 能够集中管理共享的数据，易于开发和后期的维护
- 高效的实现组件之间的数据共享，提高开发效率
- 存在vuex的数据也是响应式的，能够实时保持数据与页面的同步
应用场景
多个组件共享数据或者是跨组件传递数据时
vuex基本使用
- 安装
npm i vuex
- 导入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
- 创建store对象
const store = new Vuex.Store({
state: {
// 存放全局共享的数据
},
actions: {},
mutatiions: {},
getters: {}
})
- 全局挂载store到vue上
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
然后在组件中就可以通过this.$store访问到vuex了
vuex核心概念
一、state
state作为唯一的数据源，所有的共享数据都存放在state中，如：
const store = new Vuex.Store({
state: {
count: 0
}
})
- 组件访问state数据的方式
- 通过已经挂载到vue实例上的store对象
2.mapState辅助函数，当需要访问的状态有多个时，上面的方式就略显麻烦，代码冗余，vuex提供了mapState函数解决这个问题this.$store.state.count
在组件中先从vuex中导入mapState函数
通过mapstate函数，和展开运算符将当前组件所需要的全局数据映射成当前组件的computed计算属性,函数传递一个数组，这种最常用，你想要什么数据，就传入该数据的名称，这个名称也将作为该组件的一个计算属性使用import {mapState} from "vuex"computed: { ...mapState(['count']) } // 使用展开运算符在这里必须用{}包起来 // 如果当前组件没有私有的计算属性，可以直接简写成 computed: mapState(['count'])Snipaste_2021-08-10_11-38-20.png
另一种方法就是传入配置对象
// 如果当前组件没有私有的计算属性，可以直接简写成 computed: mapState({}) // 有私有的计算属性,不能简写 computed: { ...mapState({ // 函数方法有一个参数state，就是数据源 aaa(名字自定义): state => state.count // 简写 aaa: 'count' // 传字符串的方式等同于state => state.count // 若要访问组件的this，就得写成普通函数 aaa(state){ // 必须return return this.num + state.count } }) }
二、mutations
vuex不允许在组件中修改state中的状态，如果想要修改state的数据，唯一的方法就是通过mutations修改，其实在组件中是可以直接修改的，但是这样通过mutations修改的方式，可以更加集中的监控所有数据的变化。
在mutations中定义一些修改state数据的方法，方法第一个参数就是state对象
mutations: {
add(state){
state.count ++
}
}
（1）触发mutation的方法
- 通过store对象
this.$store.commit('add')
- mapMutations映射
组件中导入mapMutations函数
import {mapMutations} from 'vuex'
这次是在组件的methods中，将mutation映射成methods的方法
methods: {
...mapMustations(['add'])
}
（2）mutation传值（官网将传递的值称为载荷）
对于mutaion而言，方法接受的第一个参数始终是自身的state，第二个才是传递过来的参数，这个参数一般是一个对象，因为对象可以携带更多的数据。当然只有一条数据可以只传递这条数据
mutations: {
add(state, param){
state.count += param.xxx
}
}
还可以写成一种对象的方式
this.$store.commit({
type: add,
step: 20
});
// mutation的写法不变
mapMutations传值
（3）注意
- 一般我们会将mutation的名字写成是全大写和“_”,如
mutations: {
SET_TOKEN(state){},
RECEIVE_CATE_LIST(state){}.
...
}
- 方法中不能执行异步操作，也不能执行if语句
Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
引自「水墨-青花」:https://blog.csdn.net/lovemyself196221/article/details/105488288
- 大多数情况下也不是在组件中触发，而是通过actions中的方法触发mutation
三、actions
actions和mutations类似，不同的是，actions是提交mutation修改共享数据，不是直接改变共享数据的，只有通过mutation才能修改state中的函数；actions中可以执行异步操作。actions中的每一个方法的第一个参数默认使context，是与 store 实例具有相同方法和属性的对象（context !== store对象）。而在组件中执行actions方法的方式就是：this.$store.dispatch('方法名')
比如定义一个定时器异步的使count自增
actions: {
async asyncIncrement(context){
console.log(context)
}
}
而提交mutation的方法是commit，利用解构赋值将commit结构出来，提交mutation修改state的值
-
分发actions
说白了就是触发actions中的方法- this.$store.dispatch("xxx")
2.mapActions,映射在组件的methods中
methods: { ...mapActions(['asyncIncrement']) // 将asyncIncrement映射成methods中的一个方法 }methods: { // 若要自定义方法名 ...mapActions({ newMethodName(){ this.$store.dispatch("asyncIncrement"); } //或者 newMethodName: "asyncIncrement" }) } -
传递载荷（参数）
1.dispatchthis.$store.dispatch('xxx', params) // 对象形式 this.$store.dispatch({ type: asyncIncrement, params })Snipaste_2021-08-10_19-47-17.png
2.mapActions
Snipaste_2021-08-10_19-49-43.png
四、getters
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤等，其实也可以理解为是类似vue的计算属性，函数接受一个参数state,也就是数据源，数据也是响应式的，state数据变化。getters里面的数据也会随之变化，不会修改state中的数据,第二个参数是getters，通过这个属性我们就可以访问到其他的getter了
- 定义getter
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
nameList: [
{
title: "标题一",
id: 1
},{
title: "标题二",
id: 2
},{
title: "标题三",
id: 3
}
]
},
getters: {
numArr: (state, getters) => {
console.log(getters.testGetters) // {a: 2}
return state.nameList.filter((item) => {
return item.num > 11
})
}，
testGetters: () {
return {a: 2}
}
}
})
组件中访问getters中的属性
其实和state差不多，就不多说了
- this.$store.getters.getterName
this.$store.getters.numArr
- mapGetters
import { mapGetters } from "vuex";
// 同state一样，将getters中的getter映射成组件的computed的计算属性
export default {
computed: {
...mapGetters(['numArr'])
// 重命名
...mapGetters({
newName: 'numArr'
})
},
};
