vuex基础

vuex核心内容

state ： 一个对象，专门用来存放多个组件共享的数据

// 组件中获取vuex保存的state通过 this.$store.state.xxx
console.log(this.$store.state.num)

 

 

mutations: 一个对象，存放的是函数，函数的作用是专门用来修改state中的数据

// 组件中触发mutations中的函数通过 this.$store.commit('mutations中的函数名')
<el-button @click="$store.commit('addNum')">+1</el-button>

 

 

actions: 一个对象，存放的也是函数，函数的作用：1. 触发mutations对象中的函数；2. 可以在里面发送异步请求

// 组件中触发actions中的函数通过 this.$store.dispatch('actions中的函数名')
<el-button @click="$store.dispatch('triggerAddNum')">+1</el-button>

 

 

getters：一个对象，存放的是函数，只不过这个函数可以当作变量来使用，类似于计算属性

// 组件中访问计算属性通过 this.$store.getters.getters对象中的函数名
<el-tag type="danger">{{$store.getters.oddOrEven}}</el-tag>

 

 

以上4个对象，都放在一个store对象中存起来

 

获取多个state/mutations/actions/getters

通过mapXXX方法（mapState方法/mapMutations方法/mapActions方法/mapGetters方法）

mapState

import { mapState } from 'vuex'
​
​
  computed: {
    // mapState()函数运行完之后得到的是一个对象{num: function(){}, username: function(){}}
    // ...{num: function(){}, username: function(){}}
    ...mapState(['num', 'username'])
  }

 

mapMuatations

import { mapMutations } from 'vuex'
​
  methods: {
     ...mapMutations(['addNum', 'minusNum'])
  }

 

mapActions

import { mapActions } from 'vuex'
​
  methods: {
    ...mapActions(['triggerAddNum', 'triggerMinusNum'])
  }