真正掌握vuex的使用方法（六）

下面咱们来将切换的案例改为vuex来写！
首先需要在src目录下，新建一个store文件夹，然后在该文件夹内创建一个store.js文件

import Vue from 'vue';//引用vueimport Vuex from 'vuex';//引用vuexVue.use(Vuex);//使用vuexconst state={    tagList:[],//用于存放与切换相关的数据};const mutations={    //用于改变state下的tagList状态值
    SET_TAGLIST(state,v){//这里的state即是上面定义的state常量
        state.tagList=v;
    }
}export default new Vuex.Store({//暴露Store对象
    state,
    mutations,//将mutations进行暴露})

main.js为：

import Vue from 'vue'import App from './App'import router from './router'import store from './vuex/store'//导入store.jsVue.config.productionTip = falsenew Vue({    el: '#app',
    router,
    store,//添加store
    components: { App },    template: '<App/>'})

app.vue为：

<template><div id="app">
    <!--对按钮进行遍历-->
   <input type="button" v-for="(item,i) in tagList" :value="item.tagName" :class="{active:i==index}" @click="index=i">
    <!--对新闻进行遍历-->
    <div v-for="(item,i) in tagList" v-show="i==index">
        <p v-for="info in item.newList"><a :href="info.newHref">{{info.newTitle}}</a></p>
    </div></div></template><script>
    import axios from "axios";    import {mapState} from "vuex";    export default {        name: 'App',
        data(){            return {                //index用于记录当前所选按钮的位置，值会根据点击按钮的不同而变化
                index:0
            }
        },        computed:{
            ...mapState(["tagList"])
        },
        mounted(){
            axios.get("/static/tagList.json")
                .then(data=>{                    this.$store.commit("SET_TAGLIST",data.data);
                })
        }
    }</script><style>
    #app input,#app p{        margin:5px;        padding:5px;
    }    #app input.active{        background:red;
    }    #app div{        border:1px solid red;
    }</style>

npm run dev，运行一次，一切正常！
到目前为止，相信大家看以上的代码应该都不会有太大问题了，所以不做解释！
咱们知道，对多个 state 的操作 , 使用 mutations 来操作比较好维护 , 但mutations 只可以写一些同步操作，那异步操作放到哪里呢？比如咱们的axios放在哪里比较合适呢？在这个时候咱们就可以用到action了。通过action来操作mutations最终来改变state的值。
接下来在store.js中添加actions:

import Vue from 'vue';//引用vueimport Vuex from 'vuex';//引用vueximport axios from "axios"Vue.use(Vuex);//使用vuexconst state={    tagList:[]
};const mutations={    //用于改变state下的tagList状态值
    SET_TAGLIST(state,v){//这里的state即是上面定义的state常量
        state.tagList=v;
    }
}const actions={    getTagList:function(context){//这里的context和我们使用的$store拥有相同的对象和方法
        axios.get("/static/tagList.json")
            .then(data=>{
                context.commit("SET_TAGLIST",data.data);                //根据需要，咱们还可以在此处触发其它的mutations方法
            })
    }
}export default new Vuex.Store({//暴露Store对象
    state,
    mutations,//将mutations进行暴露
    actions//将actions进行暴露})

那么接下来就要在App.vue中来触发action下的方法getTagList：

import {mapState} from "vuex";export default {    name: 'App',
    data(){        return {            //index用于记录当前所选按钮的位置，值会根据点击按钮的不同而变化
            index:0
        }
    },    computed:{
        ...mapState(["tagList"])
    },
    mounted(){        //使用 $store.dispatch('getTagList') 来触发 action 中的 getTagList 方法。
        this.$store.dispatch("getTagList");
    }
}

使用 $store.dispatch('getTagList') 来触发 action 中的 getTagList 方法。也推荐大家在action里来写一些异步方法！
当然调用action的方法也有简写的形式：

//引入mapActionsimport {mapState,mapActions} from "vuex";export default {    name: 'App',
    data(){        return {            //index用于记录当前所选按钮的位置，值会根据点击按钮的不同而变化
            index:0
        }
    },    methods:{        //通过mapActions添加上action当中需要的方法getTagList
        ...mapActions(["getTagList"])
    },    computed:{
        ...mapState(["tagList"])
    },
    mounted(){        //直接调用 即可
        this.getTagList();
    }
}

npm run dev 运行，依旧完美！
未完，待续！

作者：张培跃
链接：https://www.jianshu.com/p/f77c7a7f5c19