一、vuex是什么
1、概念:vuex是专门在Vue中实现集中式状态(数据)管理的一个vue插件,对vue应用中多个组件的共享状态进行集中式的管理,也是一种组件间通信的方式,而且适用于任意组件间的通信。
2、vuex用于:当多个组件依赖于同一状态;来自不同组件的行为需要变更同一状态。
二、vuex的工作原理图
其中,state用于存储数据;
mutations用于操作数据;
actions用于响应组件中的动作;
还有getters是用于将state中的数据进行加工。
具体实现:
1、首先需要安装vuex插件:npm i vuex ;
2、在store文件夹中新建index.js文件,然后进行初始化:
import Vuex from 'vuex'
import Vue from 'vue'
// 使用安装
Vue.use(Vuex)
// 初始化
const store = new Vuex.Store({
// 配置(state|mutations|actions)
})
export default store
并在main.js中引入store;
mapState和mapGetters:
mapState是用于当组件需要获取多个状态时,将这些状态都声明计算属性会有些重复和冗余,所以可以使用mapState辅助函数帮助我们生成计算属性。然后通过扩展运算符将mapState对象放入到计算属性中,具体代码如下:
computed:{
...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
},
mapGetters使用方式和mapState类似,mapGetters是从getters中读取数据,如:
...mapGetters({bigSum:'bigSum'});
mapMutations和mapActions:
mapMutations是vuex中mutations的辅助函数,它可以用于在组件中映射mutation内的方法,借助mapMutations生成对应的方法,方法中会调用commit去联系mutations。写法和mapState和mapGetters也类似:
...mapMutations({increment:'JIA',decrement:'JIAN'});
mapActions是vuex中actions的辅助函数,它可以用于在组件中映射actions内的方法,借助mapActions生成对应的方法,方法中会调用dispatch去联系actions
...mapActions({incrementOdd:'jiaOdd',incrementWait:"jiaWait"})