下面咱们来将切换的案例改为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 运行，依旧完美！
未完，待续！
foot.png
