下面咱們來將切換的案例改為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 運行，依舊完美！?
未完，待續！

轉載于:https://www.cnblogs.com/catbrother/p/9397411.html

總結

以上是生活随笔為你收集整理的真正掌握vuex的使用方法（六）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。