vuex基础知识

vuex

​ 状态管理库 Vuex

​ 核心 state ( 数据 )

​ 核心 mutations ( 变化 )

​ 核心 getters ( 获取 )

​ 核心 actions （ 异步操作 ）

​ 核心 modules （ 模块 ）

1、 Vuex状态管理库

他是一个Vue的插件，主要用处状态（ 数据 ）的管理

作用：

• 多组件的数据共享
• 祖先传递数据给后代，层级非常深

1.1 核心State

作用： 用于定义共享的数据

定义共享的数据：

// 暴露了一个Vuex仓库实例
export default new Vuex.Store({
  // 状态 （数据）
  state: {
    // 在里面定义你需要共享的数据
    num:100,
    shopCar:[
      { id:1,name:'苹果',price:10,count:3},
      { id:2,name:'橘子',price:4,count:100},
      { id:3,name:'香蕉',price:10,count:20},
    ]
  }
})

使用共享数据：

方法1：直接使用
<template>
   <div>{{ 函数名 }} </div>
</template>
export default {
  computed:{
    函数名(){
      return this.$store.state.变量
    }
  }
};

方法2：辅助函数使用
// map 映射  mapState 映射仓库里State一一对应
import { mapState } from 'vuex'
export default {
  computed:{
     // 辅助函数数组写法 需要一一对应
    ...mapState(['仓库值','仓库值1']) //强烈推荐
      
     // 辅助函数对象写法 可以帮助我们解决冲突，并可以处理一次数据
    ...mapState({
      变量:state=>state.仓库值 * 7,
      变量1:state=>state.仓库值1,
  	})
  }
};

1.2 核心Mutations

是当前仓库中，修改数据(state)的唯一方式，如果你要修改数据，必须提交一个mutations

// 暴露了一个Vuex仓库实例
export default new Vuex.Store({
  // 状态 （数据）
  state: {
    // 在里面定义你需要共享的数据
    shopCar:[]
  }，
    // 修改 们
  mutations：{
    // 函数名字母为大写
    函数名（state,payload）{ // state就是状态   payload 传入的参数
    	state.shopCar = payload // 就相当于将传入的参数赋值给仓库里的数据
	}
  }
})

如何修改数据：

方法1： 直接修改数据

this.$store.commit('函数名',实参)

this.$store.commit({ type:'函数名', 实参 }) //了解

方法2: 辅助函数修改数据
import { mapMutations } from 'vuex'
export default {
  methods:{
      // 辅助函数数组写法
      ...mapMutations(['函数名']),

      // 辅助函数对象写法
      ...mapMutaions({
          键名:'函数名'
      })
      
  }
};

1.3 核心Getters

就相当于vuex里的计算属性，对数据进行二次处理，返回一个最终可以直接使用的结果

// 暴露了一个Vuex仓库实例
export default new Vuex.Store({
  // 状态 （数据）
  state: {
    // 在里面定义你需要共享的数据
    num:100,
    shopCar:[
      { id:1,name:'苹果',price:10,count:3},
      { id:2,name:'橘子',price:4,count:100},
      { id:3,name:'香蕉',price:10,count:20},
    ]
  },
  getters： {
     函数名1(state){
     // 对原始数据进行一堆处理
      return 最终结果
	}
    
  }
})

使用：

方法1：直接使用
<template>
   <div>{{ 函数名 }} </div>
</template>
export default {
  computed:{
    函数名(){
      return this.$store.getters.函数名1
    }
  }
};

方法2：辅助函数使用
// map 映射  mapGetters 映射仓库里Getters 一一对应
import { mapGetters } from 'vuex'
export default {
  computed:{
     // 辅助函数数组写法 需要一一对应
    ...mapGetters(['函数名1','函数名2']) //强烈推荐
  }
};

1.4 核心Actions

​ 用于异步处理，如果需要异步修改出具，放在actions,但是最后修改数据由mutations完成

// 暴露了一个Vuex仓库实例
export default new Vuex.Store({
  // 状态 （数据）
  state: {
    // 在里面定义你需要共享的数据
    shopCar:[]
  }，
    // 修改 们
  mutations：{
    // 函数名字母为大写
    SET_SHOP_CAR（state,payload）{ // state就是状态   payload 传入的参数
    	state.shopCar = payload // 就相当于将传入的参数赋值给仓库里的数据
	}
  }，
                              
  actions：{
    // context 相当于整个vue实例 $store
    函数名(context,payload){
    	一堆异步操作
        setTimeout(()=>{
            // 修改数据
            context.commit('SET_SHOP_CAR',修改的数据)
        }，1000)
	}                        
  }
})

使用方法： dispatch

方法1： 直接异步修改数据

this.$store.dispatch('函数名',实参)

this.$store.dispatch({ type:'函数名', 实参 }) //了解

方法2: 辅助函数异步修改数据
import { mapActions } from 'vuex'
export default {
  methods:{
      // 辅助函数数组写法
      ...mapActions(['函数名']),

      // 辅助函数对象写法
      ...mapActions({
          键名:'函数名'
      })
      
  }
};

1.5 核心modules [理解]

拆分仓库，解决命名冲突，每个仓库里都有自己的state,mutations,getters,actions

// 暴露了一个Vuex仓库实例
export default new Vuex.Store({
    // 核心模块 们
    modules:{
        // 第一模块
        firstModule:{
          namespaced:true, // 命名空间
          state:{num:1000},
          actions:{},
          getters:{},
          mutations:{}
        },
        // 第二模块
        secondModule:{
          namespaced:true, // 命名空间
          state:{num:1},
          actions:{},
          getters:{},
          mutations:{}
        }
  },
})

使用

this.$store.模块名.变量名