vuex的那些事儿

置顶:

映射辅助函数的万能公式

不分模块情况下:   ...map配置项名([’变量名或函数名‘])

取值方式:

 

5大配置项:

1. state:公共数据,类似于组件内data
2. mutations:用于修改state中数据(同步)
3. actions:异步请求(异步)
4. gettters:计算属性,类似于computed
5. modules:模块拆分

vuex的使用步骤:

通常脚手架都会初始化vuex,并挂载道Vue实例上的

这里简单描述一下创建项目时没有初始化vuex后,vuex的使用步骤

1. 下载

   yarn add vuex 或 npm i vuex

2. src下创建store/index.js,引入vue和vuex,并注册使用,生成store实例化后导出

   //导入vue
   import Vue from 'vue'
   
   //导入vuex
   import Vuex from 'vuex'
   
   //注册使用
   Vue.use(Vuex)
   
   //生成store实例化对象
   const store = new Vuex.store({})
   
   //导出store
   export default store

3. 在main.js中,引入store 

   //引入store
   
   import store from '@/store'

vuex的5大配置项的定义和使用:

state:初始化数据状态

定义:

const store =new Vuex.store({
   state:{
      //变量名:初始值
      count:100
   }
})

使用:

方法一:组件内直接使用

//this.$store.state.变量名(模版中可以省略this)

this.$store.state.count

方法二:映射函数(推荐)

//组件内
import { mapState } from 'vuex'

export default {
  computed:{
    //...mapState(['state里变量名'])
     ...mapState(['count'])

    //如果html模版中使用的是原来data中的变量,后来被放到vuex中的,则可以这样写,可以不用再修改模版 中的变量名
    ...mapState({'模版中data的变量名':'现在vuex中state的吧、变量名'})
  }
}

mutations:修改state里的值(只能写同步代码)

定义:

const store =new Vuex.store({
   state:{
      //变量名:初始值
      count:100
   },
   mutations:{
      //参数1:state对象
      //参数2:要修改的值
      addCount(state,val){
        state.count+=val
    }
   }
})

使用:

方法一:组件内直接使用

//this.$store.commit('mutations里函数名',具体值)
this.$store.commit('addCount',10)

方法二:映射函数(推荐)

<template>
  <div>
    <button @click="addFn">按钮</button>
  </div>
</template>

import { mapMutations } from 'vuex'

export default {
    method:{
      //...mapMutations(['mutations里函数的函数名'])
      ...mapMutations(['addCount'])
      addFn(){
       //调用vuex中mutations方法,并传参
       this.addCount(10)
      }
   }
}

actions:异步请求(只能写异步代码,不能直接修改state的值)

注意⚠️:

异步代码:1、事件回调 2、定时器、计数器 3、axios请求

定义:

const store =new Vuex.store({
   state:{
      //变量名:初始值
      count:100
   },
   mutations:{
      //参数1:state对象
      //参数2:要修改的值
      addCount(state,val){
        state.count+=val
    }
   }
   actions(){
      //参数1:store对象
      //参数2:要修改的值
     asyncAddCount(store,val){
       setTimeout(()=>{
         //异步代码修改state调用commit,需要通过mutations里的方法才可以修改
            store.commit('addCount',val)
        })
     }
   }
})

使用:

方法一:组件内使用

//this.$store.dispatch('actions函数名',具体值)
this.$store.dispatch('asyncAddCount',100)

方法二: 映射函数(推荐)

<template>
  <div>
    <button @click="asyncAddFn">按钮</button>
  </div>
</template>

import { mapActions } from 'vuex'

export default {
   methods:{
     //...mapActions(['actions内的函数名'])
     ...mapActions(['asyncAddCount'])
     asyncAddFn(){
     //调用vuex中actions方法,并传参
       this.asyncAddCount(100)
    }
  }
}

mutations和actions的区别:

1、mutations是处理同步操作

2、actions是处理异步操作,但是异步结果要通过commit给mutations的方法处理

3、mutations内方法的参数是state对象

4、actions内方法的参数是store对象

getters:

定义:

const store =new Vuex.store({
   //方式1:
   getters:{
     计算属性名(state){
        return 表达式
    }
  }
  //方式2:ES6对象的简写
  getters:{
    计算属性名:state=>state.变量名的表达式
   }
  //
  getters:{
   num:state=>state.count+100
  }
})

使用:

方法一:组件内直接使用

//this.$store.getters.计算属性名
this.$store.getters.num

方法二:映射函数(推荐)

import { mapGetters } from 'vuex'

export default {
  computed:{
    //...mapGetters(['getters里变量名'])
     ...mapGetters(['num'])
  }
}

modules:

步骤:

1、新建store/modules/user.js

const userModule={
   state(){
    retutn {
      变量名:值
     }
  },
   mutations:{},
   actions:{},
   getters:{},
}

//导出模块

export default  userModule

2 、在store/index.js中

//导入模块
import userModule from './modules/user.js'

//注册

const store=new Vuex.store({
   modules:{
      userModule,
   } 
})

注意⚠️:分模块后只影响state的取值方式

组件内直接使用

this.$store.state.模块名.state里的变量名

 映射函数(推荐)

computed:{
   ...mapState({'变量名':state=>state.模块名.state里的变量名})
}

分模块开启命名空间:

在模块对象的js文件内,模块对象内设置namespaced:true

取值方式: