vuex笔记

State

定义

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: "zs",
  },
});

使用

//1.通过this.$store.state调用
  computed: {
    name() {
      return this.$store.state.name;
    },
  },
//2.通过辅助函数mapState调用
  computed: {
    //数组形式
    ...mapState(["name"]),
    //对象形式
    ...mapState({myName:'name'}),
  },

modules中使用

1. 通过this.$store.state.模块名.数据使用

2. 辅助函数

   computed:{
       ...mapState('模块名',['模块内的state'])
   }
   

Mutations

定义

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: "zs",
  },
  mutations: {
    setName(state, payload) {
      state.name = payload;
    },
  },
});

使用

1. 通过this.$store.commit调用

   handle() {
         this.$store.commit("setName", "ls");
       },
   

2. 通过辅助函数mapMutations调用

   <button @click="setName('ls')">测试</button> 
   
   methods: {
       //数组形式
       ...mapMutations(["setName"]),
       //对象形式
       ...mapMutations({mySetName:'setName'}),
     },
   

modules中使用

1. 通过this.$store.commit(‘模块名/方法名’)调用

   this.$store.commit('user/updateToken')
   

2. 辅助函数

   methods:{
       ...mapMutations('模块名',['模块内的方法名'])
   }
   

Actions

定义

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: "zs",
  },
  mutations: {
    setName(state, payload) {
      state.name = payload;
    },
  },
  actions: {
    setAsyncName(store, payload) {
      setTimeout(() => {
        store.commit("setName", payload);
      }, 1000);
    },
  },
});

使用

1. 通过this.$store.dispatch调用

     methods: {
       handle(name) {
         this.$store.dispatch("setAsyncName", name);
       },
     },
   

2. 通过辅助函数mapActions调用

   <button @click="setAsyncName('ls')">测试</button>  
   
   methods: {
       //数组形式
       ...mapActions(["setAsyncName"]),
       //对象形式
       ...mapActions({mySetAsyncName:'setAsyncName'}),
     },
   

modules中使用

1. 通过this.$store.dispatch(‘模块名/方法名’)调用

2. 辅助函数

   methods:{
       ...mapActions('模块名',['模块内的方法名'])
   }
   

Getters–对应computed

定义

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: "zs",
  },
  getters: {
    introduce(state) {
      return state.name + "15岁了";
    },
  },
});

使用

1. 通过this.$store.getters调用

   computed: {
       introduce() {
           return this.$store.getters.introduce;
       },
   },
   

2. 通过辅助函数mapGetters调用

   <div>{{ introduce }}</div>  
   
   computed: {
       //数组形式
       ...mapGetters(['introduce']),
       //对象形式
       ...mapGetters({myIntroduce:'introduce'}),
   },
   

modules中使用

1. 通过this.$store.getters[‘模块名/属性名’]调用

2. 辅助函数

   computed:{
       ...mapGetters('模块名',['模块内的数据名'])
   }