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进行暴露
})

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/>'
})

<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>

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进行暴露
})

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");}
}

//引入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();}
}