vue2中vuex基本使用

store文件夹下的index.js文件定义vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
  },
  state:{
    xxx:0
  },
  getters:{
    add(state){
      return state.xxx++
    }
  },
  actions:{
    async act({commit, state}, data){
      return await axiso.post(data)
    }
  },
  mutations:{
    aaa(state,data){
      state.xxx = data
    }
  }
})

state中值的获取方式 (用于存放共享数据)

单个获取方式

methods的方法中： this.$store.state.xxx

html中：<p>{{$store.state.xxx}}</p>

---

多个调用方式：使用mapState统一获取

import { mapState } from "vuex";

computed: {
  //对象的形式
  ...mapState({ xxx: "xxx" }),
  //数组的形式
  ...mapState(["xxx"]),
},
//使用
methods:{
  bbb(){
  console.log(this.xxx)
  }
}

html中使用：<p>{{xxx}}</p>

mutations中方法的调用方式 （用于存放修改state中数据的方法）

单个调用方式： this.$store.commit("aaa",3)

参数一为调用的方法名，参数二为使用方法传入的参数

---

多个调用方式：使用mapMutations统一获取再调用

import { mapMutations } from "vuex";

methods:{
  ...mapMutations(['aaa']),
  //使用
  bbb(){
  this.aaa(3)
  }
},

actions中方法的调用方式 （用于存放异步方法）

单个调用方式： this.$store.dispath("act",{a:1})

---

多个调用方式：使用mapMutations统一获取再调用

import { mapActions } from "vuex";

methods:{
  ...mapActions(['act']),
  //使用
  bbb(){
  this.act({a:1}).then(res => console.log(res))
  }
},

getters中方法的调用方式 （与计算属性computed类似，存放一些计算操作）

单个调用方式： this.$store.getters("add")

---

多个调用方式：使用mapMutations统一获取再调用

import { mapGetters } from "vuex";

computed:{
  ...mapGetters(['add']),
},

modules (用于将actions、state、getters、mutations分模块存放，便于查找和维护)

modules中还能加modules

modules可以加多个modules