vuex

Posted 2023-04-30

vuex介绍

我们可以把vuex想象成一个手机店，所有用户都可以访问到这个手机店，手机店中有一个店员和一个维修人员，这个手机店有很多商品，比如：各种手机，蓝牙耳机，保护膜，保护套，手机卡等，这个商店的属性就相当于state。商店中还有一些商品，需要商家进行处理，比如充电器，耳机，手机套等一些东西，用户购买时需要打包成一套，这些任务用户可以直接买一套产品，也可以分开，一个一个买。这里商家帮我们整理成一个商品盒，就相当于getters。之后用户购买手机，需要给店员付款，付款之后才可以取手机，需要执行完一些流程，来对商品进行操作，因为店员只有一个，因此店员在服务当前顾客时，其它顾客就需要等待当前顾客购买完，这是同步的处理，会造成程序的组测，也就是mutations。用户的手机遇到了问题，需要维修，店员只用把手机交给维修人员即可，并不影响他去接待其它客户，这就是actions。之后当店铺做大了，可能会有更多牌子的手机，更多的店员，更多的维修人员，那么就需要我们开分店，将手机分发到不同的分店，店员以及维修人员都分配到不同地方，只需要在总店做记录即可，这就是modules。
vuex的相关知识点大概就是这些，仅作参考。

使用vuex

在使用vuex时，我们只需要在该组件中引入store，之后就可以通过this.$store去进行操作，在vue3中则可以使用对应的useStore进行操作。
但是如果要在当前文件中使用很多的mutations对应的方法或者是state，则就非常不方便。因此我们可以使用辅助函数,mapMutations,mapGetters,mapActoins,mapState
使用mapState以及mapGetters：

1. 先在当前文件中导入mapState以及mapGetters，import mapGetters,mapState from \'vuex\'
2. 之后在computed钩子函数中使用

computed:
	...mapState([\'loginState\',\'dishCart\']),
	...mapGetters([\'userInfo\'])

这里可以分别导入需要使用的内容，以数组形式，还可以使用箭头函数的方式进行导入。
使用mapMutations以及mapActions
mapActions和mapMutations的使用方法和上面两个类似，不过我们需要在method中进行导入，数组中为我们需要的函数名，

注意事项

调用vuex中的函数进行参数传递时，在vuex中的函数声明有两个参数，第一个参数为state,第二个参数为options，也就是我们需要调用这个函数所传递的参数，如果我们要传递的函数有很多个，那么这里的options在传递时要传递成对象的形式，否则在vuex中无法接收到，这个是固定的。通俗一点说也就是，在vuex中声明的函数只接收一个参数，如果需要传递多个参数，则可以使用对象的形式进行传递，否则vuex无法接收

vuex的使用，vuex数据调用

vuex的相关使用

vuex中数据的调用

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
export default new Vuex.Store({
  state: { //存放状态
    nickname:‘zhangsan‘,
    age:20,
    gender:‘男‘
  },
  mutations: {},
  actions: {},
  modules: {}
})

1. state

• 可以直接在vue元素上添加

<div class="home">{{ $store.state.nickname }}</div>

• 在computed中添加

<template>
  <div class="home">
    {{ nickname }}
  </div>
</template>
<script>
export default {
  name: ‘home‘,
  computed:{
    nickname(){
      return this.$store.state.nickname
    }
  }
}
</script>

2. 使用mapState辅助函数

• 需要vue中引入 mapState

import {mapState} from ‘vuex‘
export default {
  name: ‘home‘,
  computed: mapState([‘nickname‘,‘age‘,‘gender‘]) // 可直接使用
}

mapState([‘nickname‘,‘age‘,‘gender‘])
// 类似于
nickname(){return this.$store.state.nickname}
age(){return this.$store.state.age}
gender(){return this.$store.state.gender}

• 当vuex模块较多时，可以设置store属性namespace: true，然后在调用的时候表示出来自哪个模块

mapState{
  nickname: state => state.app.nockname,
  age: state => state.app.age
}

3. getters

• getters属于vuex中的计算属性，通过getters进一步处理，允许传参，第一个参数就是state

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: { //存放状态
    nickname:‘Simba‘,
    firstname:‘张‘,
    lastname:‘三丰‘,
    age:20,
    gender:‘男‘,
    money:1000
  },
  getters:{
    realname(state){
      return state.firstname+state.lastname
    },
    money_us(state){
      return (state.money/7).toFixed(2)
    }
  },
  mutations: {},
  actions: {},
  modules: {}
})

• vue页面调用的时候

computed: {
 valued (){
   return this.value/7
 },
 ...mapGetters([‘name‘, ‘age‘]) // 可直接使用
}

4. Mutation

• mutations需要通过commit来调用其里面的方法，它也可以传入参数，第一个参数是state，第二个参数是载荷（payLoad），也就是额外的参数

mutations: { //类似于methods
  addAge(state,payLoad){
    state.age+=payLoad.number
  }
}

<div class="home">
   <div><button @click="test">测试</button></div>
</div>

methods:{
 test(){
  //  可通过前台操作触发执行mutations里面的方法
   this.$store.commit(‘addAge‘,{
     number:5
   })
 }
}

• mapMutations : 跟mapState和mapGetters一样

methods:{
 ...mapMutations([‘addAge‘])
}
// 或者
methods: {
  addAge(payLoad){
    this.$store.commit(‘addAge‘,payLoad)
  }
}

action

• action中属于一部操作，mutations属于同步操作
• action不要直接取操纵state，是通过操作mutations进而去改变state里面的值
• action中的方法默认的就是异步，并且返回promise

actions: {
  getUserInfo(){
    return {
      nickname:‘Simba‘,
      age:20
    }
  }
}
// 在actions中定义一个方法：getUserInfo，并且返回一个对象

created(){
  var res = this.getUserInfo()
  console.log(res)
},
methods:{
  ...mapActions([‘getUserInfo‘])
}

// mapActions([‘getUserInfo‘]) 相当于以下代码
getUserInfo(){
  return this.$store.dispatch(‘getUserInfo’)
}

export default new Vuex.Store({
 state: { 
  nickname: ‘‘,
  age:0,
  gender: ‘‘,
  money:0
 },
 mutations: {
  setUerInfo(state,payLoad){
   state.nickname = payLoad.nickname
   state.age = payLoad.age
   state.gender = payLoad.gender
   state.money = payLoad.money
  }
},
actions: { //actions没有提供state当参数
 async getToken({commit}){
   var res = await axios.get(‘/token接口‘)
   commit(‘setToken‘,res)
 },
async getUserInfo(context){ 
//context可以理解为它是整个Store的对象.类似于this.$store，
他里面包含了state，getter，mutations，actions
  const res = await axios.get(‘/接口url‘)
  context.commit(‘setUerInfo‘,res) 
//相当于 this.$store.commit,第一个参数是方法名，第二个参数是要传入的数据
  context.dispatch(‘getToken‘) 
//actions也可以调用自己的其他方法
    },
  }
})