vuex学习总结

vue-cli搭建的项目中mian.js要引入
import store from ‘./store/store.js’

vuex的主要store.js文件

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

Vue.use(Vuex)

const store=new Vuex.Store({
  state: {
    count: 0,
    num:0
  },
  mutations: {
    add(state) {
      state.count++;
    },
    addN(state, step) {
      state.count += step;
    },
    jian(state) {
      state.count--;
    },
    jianN(state, step = 1) {
      state.count -= step;
    }
  },
  actions: {
    asyncAdd(content) {
      setTimeout(() => {
        content.commit('add')
      }, 2000)
    },
    jianAction(content) {
      setTimeout(() => {
        content.commit('jian')
      }, 1000)
    }
  },
  getters:{
    dealwith(state){
        return '当前最新的数量【'+state.count+'】'
    }
  }
})


/* 导出的两种方式
1.export default new Vuex.Store({})
2.export default store;
*/
export default store;

.vue文件使用vuex
调用vuex的mutations用this.$store.commit("jianN",3)调用vuex的action用this.$store.dispatch(“asyncAdd”)

<template>
  <div>
    <h3>当前的值为{{count}}</h3>
    <h3>{{dealwith}}-getters</h3>
    <button @click="jian">-1</button>
    <button @click="TojianN">-3</button>
    <button @click="jianAction">-1-action</button>
    <button @click="jianAction">-1 getters</button>
  </div>
</template>

<script>
/* 导入map,注意大小写和末尾的s */
  import {
    mapState,
    mapMutations,
    mapActions,
    mapGetters
  } from 'vuex';



  export default {
    data() {
      return {

      }
    },
    methods: {
/*      jian() {
        console.log(1)
        this.$store.commit("jian")
      },
      jianN() {
        this.$store.commit("jianN", 3)
      }, */
      //上面的简写：
      ...mapMutations(['jian', 'jianN']),
      ...mapActions(['jianAction']),
      //...mapMutations中的jianN这样传值
      TojianN() {
        this.jianN(3);
      }
    },
    computed: {
      ...mapState(['count']),
      ...mapGetters(['dealwith'])
    }
  }
/* 总结
	mapState,mapGetters一般放computed
	mapMutations,mapActions一般放methods里
*/
</script>
<style>

</style>

.vue文件使用vuex
调用vuex的mutations用this.$store.commit("jianN",3)调用vuex的action用this.$store.dispatch(“asyncAdd”)

<template>
  <div>
    <h3>当前的值为:{{count}}</h3>
    <button @click="add">+1</button>
    <button @click="addN">+3</button>
    <button @click="addAction">+1-action</button>
  </div>
</template>

<script>
  import axios from 'axios';
export default {
    data() {
      return {

      }
    },
    methods: {
      add() {
        this.$store.commit("add")
        // axios使用
        axios.post('/dsd2/life/tip', "appCode=1c6a0198177bfcc9bd93f6aab94aad3c").then(res => {
          console.log("post成功");
          console.log(res);
        }).catch(err => {
          console.log("post失败");
          console.log(err);
        });

      },
      addN() {
//触发Vuex的mutations
        this.$store.commit("addN", 3)-------------调用vuex的mutation
      },
      addAction() {
//触发Vuex的action
        this.$store.dispatch("asyncAdd")-------------调用vuex的action
      }
    },
    computed: {
      count() {
        return this.$store.state.count;-------------调用vuex的state
      }
    }

  }
</script>
<style>

</style>