vuejs之Vuex 状态管理库、state核心、mutations核心、getters核心、actions核心、modules核心

Vuex 状态管理库

安装

在第二步选中vuex

store/index.js

 //共享数据
  state: {
  },
  //二次处理
  getters: {
  },
  //修改数据的方法
  mutations: {
  },
  //异步修改数据的方法
  actions: {
  },
  //拆分仓库
  modules: {
  }

state核心[必须会]

作用:多个组件共享数据

获取数据

//直接获取--不建议使用
 computed: {
    num() {
      console.log(this.$store);
      //直接获取
      return this.$store.state.num;
    },
    goods() {
      return this.$store.state.goods;
    },
  },
      
  //通过辅助函数获取 [开发常用]
 import {mapState} from "vuex"
 //计算属性
 computed: {
  	...mapState(['num','goods']),//数组的方法  推荐使用
    //对象的方式 可以解决命名冲突问题 , 不建议使用  我们可以修改自己的名字
    ...mapState({
        nums:state=>state.num,
        goodsList:state=>state.goods
    })
  },

mutations核心[必须会]

作用:修改数据唯一方式

//直接使用--不建议使用
mutations: {
    SET_Vuex_num(state,payload){
        state.num+=payload
    }
  },

methods:{
    changeNum(){
        this.$store.commit("SET_Vuex_num",8)
    }
}

//辅助函数 ---推荐使用
import {mapMutations} from "vuex";
methods:{
    ...mapMutations(['vuex中方法名','vuex中方法名','vuex中方法名',...]),
}

getters核心[掌握]

作用:二次处理state里面的数据

getters:{
    函数名(state){
        根据自己需求对数据进行了二次处理
        返回处理之后结果
    }
}

//直接使用--不建议使用
computed:{
    名称(){
        return this.$store.getters.getters里面的函数名称
    }
}

//辅助函数--推荐使用
import {mapGetters} from "vuex"

computed:{
   ...mapGetters(['函数名称','函数名称',...])
}

actions核心[知道]

作用:修改数据有异步操作

mutations:{
    函数名称(state,payload){
        
    }
}

actions:{
    函数名称(context,payload){
        //context===>this.$store
        //payload===>参数
        setTimeout(()=>{
            //有异步操作  本质上还是调用mutations里面的方法
            context.commit('mutations里面的方法',payload)
        },1000)
    }
}

//直接使用---不推荐
this.$store.dispatch('actions函数名称','参数')

//辅助函数
import {mapActions} from "vuex"
methods:{
    ...mapActions(['函数名称','函数名称',...])
}

modules核心[了解]

作用:拆分仓库

modules:{
	模块名称A:{
      namespaced: true, // 开启命令空间
      state: {},//共享数据
      mutations: {},//修改数据的唯一方式
      actions: {},//异步修改数据 
      getters: {}, //二次处理数据
    },
     模块名称B:{
      namespaced: true, // 开启命令空间
      state: {},//共享数据
      mutations: {},//修改数据的唯一方式
      actions: {},//异步修改数据 
      getters: {}, //二次处理数据
    },
      ...
}
      
      
 //获取数据
   this.$store.state.模块名称.数据名称
   this.$store.getters['模块名称/数据名称']
   
//修改数据
    this.store.commit("模块名称/方法名称",'参数')
    this.store.dispatch("模块名称/方法名称",'参数')

$store
//payload===>参数
setTimeout(()=>{
//有异步操作 本质上还是调用mutations里面的方法
context.commit(‘mutations里面的方法’,payload)
},1000)
}
}

//直接使用—不推荐
this.$store.dispatch(‘actions函数名称’,‘参数’)

//辅助函数
import {mapActions} from “vuex”
methods:{
…mapActions([‘函数名称’,‘函数名称’,…])
}

#### modules核心[了解]

作用:拆分仓库

```js
modules:{
	模块名称A:{
      namespaced: true, // 开启命令空间
      state: {},//共享数据
      mutations: {},//修改数据的唯一方式
      actions: {},//异步修改数据 
      getters: {}, //二次处理数据
    },
     模块名称B:{
      namespaced: true, // 开启命令空间
      state: {},//共享数据
      mutations: {},//修改数据的唯一方式
      actions: {},//异步修改数据 
      getters: {}, //二次处理数据
    },
      ...
}
      
      
 //获取数据
   this.$store.state.模块名称.数据名称
   this.$store.getters['模块名称/数据名称']
   
//修改数据
    this.store.commit("模块名称/方法名称",'参数')
    this.store.dispatch("模块名称/方法名称",'参数')

作业

1.整理xmind

2.课堂2遍

3.健身项目写2个静态页面