码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-04 13:52:16      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:lin   dex   export   put   token   index   用法   ken   修改   

目标:将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>

 

 

 

 

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

标签:lin   dex   export   put   token   index   用法   ken   修改   

原文地址:https://www.cnblogs.com/lingXie/p/13042674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!