vue-vuex初步封装 与 高级用法

Posted 2020-12-24 lingxie

目标：将vuex的使用文件分离。一般按状态state，获取state，同步修改state，异步修改state 分离

vuex存放目录：

 

 

store/index.js 

/*
 * @Author: lingxie
 * @Date: 2020-04-23 13:35:57
 * @Descripttion: 
 */ 
import Vue from ‘vue‘
import Vuex from ‘vuex‘
import state from ‘./state‘
import getters from ‘./getters‘
import mutations from ‘./mutations‘
import actions from ‘./actions‘

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
})

store/state.js 

 

/*
 * @Author: lingxie
 * @Date: 2020-06-04 10:29:48
 * @Descripttion: 
 */ 
export default{
    msg:‘‘,
    token:‘‘,
    time:"2020-5-20",
    week:"星期一",
    count:0,
}

 

store/getters.js

 

/*
 * @Author: lingxie
 * @Date: 2020-06-04 10:22:18
 * @Descripttion: 
 */ 
export default{
    g_week(state){
         return state.week = ‘星期二‘;
    }, 
}

 

store/mutations.js

/*
 * @Author: lingxie
 * @Date: 2020-06-04 10:22:29
 * @Descripttion: 
 */ 

export default {
    add(state,n) {
        console.log(‘增加count,有参数‘);
        state.count+=n;
    },
    reduceCount(state){
        console.log(‘减少count，无参数‘);
        state.count--;
    },
}

store/actions.js

/*
 * @Author: lingxie
 * @Date: 2020-06-04 10:22:38
 * @Descripttion: 
 */ 
export default{
    // async getToken({commit}){
    //     var res = await axios.get(‘/xxxxx‘)
    //     commit(‘setToken‘,res)
    // },
    reduce({commit}){
        setTimeout(()=>{
            console.log(‘10秒后减少数量‘)
            commit(‘reduceCount‘)
        },10);
    },
}

页面使用

<!--
 * @Author: lingxie
 * @Date: 2020-06-04 10:17:53
 * @Descripttion: 
--> 
<template>
    <div>
        <h1>vuex-vue状态管理</h1>
        <p>信息：{{msg}}</p>
        <p>token：{{token?‘token‘:‘null‘}}</p>
        <p>时间：{{time}}</p>
        <p>星期： {{week}}</p>

        <h3>数量：{{count}}</h3>
        <p>
            <button @click="add(6)">同步传参增加</button>
        </p>
        <p>
             <button @click="reduce(6)">异步传承减少</button>
        </p>
    </div>
</template>
<script>
import { mapState, mapGetters,mapMutations,mapActions } from "vuex";
export default {
    data(){
        return{

        }
    },
    computed:{
        /* 相当于
            time(){return this.$store.state.time},
            token(){return this.$store.state.token}
        */ 
        ...mapState([‘time‘,‘token‘,‘count‘]),

        /*相当于
            msg(state){ return state.msg = ‘hello‘}
        */ 
        ...mapState({
            msg:state => state.msg = ‘hello‘
        }),
         /*相当于
            week(state){return state.g_week}
        */ 
        ...mapGetters({
            week:‘g_week‘
        })
    },
    methods:{
        /*相当于
            add(){
                this.$store.commit(‘add‘)
            }
        */ 
        ...mapMutations([‘add‘]),
         /*相当于
            reduce(){
                this.$store.dispatch(‘add‘)
            }
        */ 
        ...mapActions([‘reduce‘])
    }
}
</script>
<style lang="less" scoped>

</style>