本文已参与「新人创作礼」活动．一起开启掘金创作之路

Vuex

概念：专门在vue中实现集中式状态管理的一个Vue插件，多个组件的共享状态集中式管理，也是组件通信的方式，适用于任意组件间的通信。

使用场景：1.多组件依赖同一状态 2 不同组件的行为需要变更同一状态

1.vuex工作原理图

在store文件中，有一个版本匹配原则：vue2要用vuex3版本，vue3要用vuex4版本

// 这个就是Vuex，*

import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex插件，不要忘了在main.js中创建vm
Vue.use(Vuex)

export default new Vuex.Store({
 //用于存储数据 ----数据写在这里，$store.state.shuju获取
  state: {
		shoocl:"xuexiao"
  },
 //用于响应组件中的动作----进行动作需要发请求才可以获得的时候，在这个地方发请求或者写点业务请求
  actions: {},
 // 用于操作数据----在这里对数据进行处理，且处理后的生成新的数据*
  getters: {
      shoocl:"xuexiao"
  },
 // 在这里对数据修改，即加工state里面数据
  mutations: {

  },
})

2.mapState和mapGetters

在组件中,可以引入数据，直接使用

<script>
 import { mapState ，mapGetters } from 'vuex'  
 export default {
  computed:{
      第一种对象写法
  ...mapState({school:"xuexiao"})  //展开运算符，借助mapstate生成计算属性，重state中读取数据
      第二种数组写法
      ...mapState(['school']) 
-------------------------------------------------------
     第一种对象写法
  ...mapGetters ({school:"xuexiao"})  //展开运算符，借助mapGetters 生成计算属性，重getters中读取数据
      第二种·数组写法
      ...mapGetters(['school']) 
   }
}
<script>

3.mapActions和mapMutations

运用方法和上面一样

4.多组件共享数据

哪个组件使用，直接在哪个组件使用即可

5.vuex模块化

import Vue from 'vue'
*// 引入vuex插件*
import Vuex from 'vuex'
*// 应用vuex插件*
Vue.use(Vuex)
*// 例如这个是订单模块相关的vuex配置*
const dingdan = {
   // 命名空间
 namespaced:true  //不写默认是false，写上之后，在组件中，模块分类名dingdan才能被mapstate所认识捕获  
 state: {
	sun:1,
    number:3
 },
 getters: {

 },
 mutations: {

 },
 actions: {

 },
}

*// 例如这个是其他模块相关的vuex配置*
const qita = {
    
}
*// 创建并暴露store*
export default new Vuex.Store({
 modules: {
  *// a:dingdan,*
  *// b:qita*
  *// 模块化，可以写成*
  dingdan,
  qita
 }
})

在组件中怎么去调用呢

<script>
 import { mapState ，mapGetters } from 'vuex'  
 export default {
  computed:{
      一个模块一个模块的读
      ...mapState(['dingdan',['sun','number']) //展开运算符，借助mapstate生成计算属性，重state中读取数据
      ...mapState(['qita',['....','里面的数据']) //展开运算符，借助mapstate生成计算属性，重state中读取数据
                   在组件中获取getters需要使用获取对象值的另一种方法：对象名名['属性名']
}
<script>