vuex的使用,vuex数据调用

Posted yancyzheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
  1. 使用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
}
  1. 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‘]) // 可直接使用
}
  1. 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也可以调用自己的其他方法
    },
  }
})

以上是关于vuex的使用,vuex数据调用的主要内容,如果未能解决你的问题,请参考以下文章

Vuex 注入 Vue 生命周期的过程

Vuex状态数据源state

Vuex 在开始时从 API 调用中填充数据

vuex的使用

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构