神刀安全网

真正掌握vuex的使用方法(六)

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

import Vue from 'vue';//引用vue import Vuex from 'vuex';//引用vuex Vue.use(Vuex);//使用vuex const 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.js Vue.config.productionTip = false new 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';//引用vue import Vuex from 'vuex';//引用vuex import axios from "axios" Vue.use(Vuex);//使用vuex const 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的方法也有简写的形式:

//引入mapActions import {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 运行,依旧完美!
未完,待续!

真正掌握vuex的使用方法(六)

foot.png

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 真正掌握vuex的使用方法(六)

分享到:更多 ()