The use of vuex, vuex data call

Related uses of vuex

Data calling in 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

• Can be added directly on the vue element

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

• Add in computed

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

2. Use mapState helper function

• MapState needs to be introduced in vue

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}

• When there are many vuex modules, you can set the store attribute namespace: true, and then indicate which module comes from when calling

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

3. getters

• Getters belong to the calculated attributes in vuex, and are further processed by getters to allow parameter passing. The first parameter is 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: {}
})

• When the vue page is called

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

4. Mutation

• Mutations need to call the method inside through commit. It can also pass in parameters. The first parameter is state, and the second parameter is payload, which is an additional parameter

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: same as mapState and mapGetters

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

action

• Action belongs to an operation, mutations belong to synchronous operation
• Action should not directly manipulate the state, but change the value in the state by operating mutations
• The method in action is asynchronous by default, and returns a 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也可以调用自己的其他方法
    },
  }
})