下面咱們來(lái)將切換的案例改為vuex來(lái)寫(xiě)却音！
首先需要在src目錄下诽表，新建一個(gè)store文件夾吨铸，然后在該文件夾內(nèi)創(chuàng)建一個(gè)store.js文件
import Vue from 'vue';//引用vue
import Vuex from 'vuex';//引用vuex
Vue.use(Vuex);//使用vuex
const state={
tagList:[],//用于存放與切換相關(guān)的數(shù)據(jù)
};
const mutations={
//用于改變state下的tagList狀態(tài)值
SET_TAGLIST(state,v){//這里的state即是上面定義的state常量
state.tagList=v;
}
}
export default new Vuex.Store({//暴露Store對(duì)象
state,
mutations,//將mutations進(jìn)行暴露
})
main.js為：
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store'//導(dǎo)入store.js
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,//添加store
components: { App },
template: '<App/>'
})
app.vue為：
<template>
<div id="app">
<!--對(duì)按鈕進(jìn)行遍歷-->
<input type="button" v-for="(item,i) in tagList" :value="item.tagName" :class="{active:i==index}" @click="index=i">
<!--對(duì)新聞進(jìn)行遍歷-->
<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用于記錄當(dāng)前所選按鈕的位置纺荧，值會(huì)根據(jù)點(diǎn)擊按鈕的不同而變化
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捣郊，運(yùn)行一次叭披，一切正常寥殖！
到目前為止，相信大家看以上的代碼應(yīng)該都不會(huì)有太大問(wèn)題了涩蜘，所以不做解釋?zhuān)?br>
咱們知道嚼贡，對(duì)多個(gè) state 的操作 , 使用 mutations 來(lái)操作比較好維護(hù) , 但mutations 只可以寫(xiě)一些同步操作，那異步操作放到哪里呢同诫？比如咱們的axios放在哪里比較合適呢粤策？在這個(gè)時(shí)候咱們就可以用到action了。通過(guò)action來(lái)操作mutations最終來(lái)改變state的值误窖。
接下來(lái)在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狀態(tài)值
SET_TAGLIST(state,v){//這里的state即是上面定義的state常量
state.tagList=v;
}
}
const actions={
getTagList:function(context){//這里的context和我們使用的$store擁有相同的對(duì)象和方法
axios.get("/static/tagList.json")
.then(data=>{
context.commit("SET_TAGLIST",data.data);
//根據(jù)需要叮盘，咱們還可以在此處觸發(fā)其它的mutations方法
})
}
}
export default new Vuex.Store({//暴露Store對(duì)象
state,
mutations,//將mutations進(jìn)行暴露
actions//將actions進(jìn)行暴露
})
那么接下來(lái)就要在App.vue中來(lái)觸發(fā)action下的方法getTagList：
import {mapState} from "vuex";
export default {
name: 'App',
data(){
return {
//index用于記錄當(dāng)前所選按鈕的位置，值會(huì)根據(jù)點(diǎn)擊按鈕的不同而變化
index:0
}
},
computed:{
...mapState(["tagList"])
},
mounted(){
//使用 $store.dispatch('getTagList') 來(lái)觸發(fā) action 中的 getTagList 方法霹俺。
this.$store.dispatch("getTagList");
}
}
使用 $store.dispatch('getTagList') 來(lái)觸發(fā) action 中的 getTagList 方法柔吼。也推薦大家在action里來(lái)寫(xiě)一些異步方法！
當(dāng)然調(diào)用action的方法也有簡(jiǎn)寫(xiě)的形式：
//引入mapActions
import {mapState,mapActions} from "vuex";
export default {
name: 'App',
data(){
return {
//index用于記錄當(dāng)前所選按鈕的位置丙唧，值會(huì)根據(jù)點(diǎn)擊按鈕的不同而變化
index:0
}
},
methods:{
//通過(guò)mapActions添加上action當(dāng)中需要的方法getTagList
...mapActions(["getTagList"])
},
computed:{
...mapState(["tagList"])
},
mounted(){
//直接調(diào)用 即可
this.getTagList();
}
}
npm run dev 運(yùn)行愈魏，依舊完美！
未完想际，待續(xù)培漏！
foot.png
