詳解如何更好的使用module vuex

一、 前言

在項(xiàng)目如何使用vuex呢？以前我都是非模塊末去寫的，可能大家和我一樣也是這么去寫，但是回過(guò)頭去看看vue的文檔，發(fā)現(xiàn)模塊化去使用vuex更好，vue是單頁(yè)面應(yīng)用，其實(shí)只有一個(gè)頁(yè)面，那么首頁(yè)也好列表頁(yè)也好，那都相當(dāng)于這一個(gè)頁(yè)面的一個(gè)模塊，也可以把它理解為是一個(gè)一個(gè)的組件，畢竟組件化、組件抽離、組件封裝是比較火的，所以在使用vuex的模塊化的時(shí)候就能更好的去管理對(duì)應(yīng)的模塊，對(duì)于數(shù)據(jù)分離和定位都非常的好。廢話有點(diǎn)多，先丟張圖。

Demo連接： https://github.com/cookie-zhang/vuex_Demo

通信之間還是比較麻煩的，所以誕生了vuex。

二、 啥是vuex？

有人說(shuō)是一個(gè)插件、有人說(shuō)是一個(gè)倉(cāng)庫(kù)。官方說(shuō)的就比較好理解，Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的 狀態(tài)管理模式 。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。其實(shí)它就是對(duì)vue做數(shù)據(jù)管理的，更好的存儲(chǔ)數(shù)據(jù)、相應(yīng)數(shù)據(jù)。

三、 什么時(shí)候最適合使用vuex？

應(yīng)用官方語(yǔ)言：Vuex 可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架。這需要對(duì)短期和長(zhǎng)期效益進(jìn)行權(quán)衡。如果您不打算開(kāi)發(fā)大型單頁(yè)應(yīng)用，使用 Vuex 可能是繁瑣冗余的。確實(shí)是如此——如果您的應(yīng)用夠簡(jiǎn)單，您最好不要使用 Vuex。一個(gè)簡(jiǎn)單的store模式就足夠您所需了，但是，如果您需要構(gòu)建一個(gè)大型單頁(yè)應(yīng)用，您很可能會(huì)考慮如何更好的在組件外部管理狀態(tài)，Vuex將會(huì)成為自然選擇。

四、 由圖講原理

四大核心模塊：

• state: 翻譯：狀態(tài)，state其實(shí)是數(shù)據(jù)狀態(tài)管理對(duì)象，在這里你可以初始化一些你想要的數(shù)據(jù)。
• getter: 翻譯： 獲得者，getter是對(duì)state的數(shù)據(jù)對(duì)象的讀取，getters從表面是獲得的意思，可以把他看作在獲取數(shù)據(jù)之前進(jìn)行的一種再編輯,相當(dāng)于對(duì)數(shù)據(jù)的一個(gè)過(guò)濾和加工。getters就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算
• Actions：翻譯：行動(dòng)，Actions里面我們可以定義我們想執(zhí)行異步的方法，在這里它并不會(huì)立即去執(zhí)行，而是在頁(yè)面中去dispatch這個(gè)方法，提交mutations，而不是直接去改變狀態(tài)，在頁(yè)面中有兩種方式去做派發(fā)，第一種  this.$store.dispatch('xxx') 第二種 可以使用mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用（Demo中有體現(xiàn)）
• mutations：翻譯： 突變，mutations里面可寫很多的改變狀態(tài)的方法，也就是像翻譯一樣，可以改變state里面的數(shù)據(jù)，試講state的里面數(shù)據(jù)發(fā)生改變的唯一方式。

五、上Demo

初始化項(xiàng)目就不講了，根據(jù)文檔一步一步生成就可以了

目錄結(jié)構(gòu)：

頁(yè)面展示

模塊化數(shù)據(jù)

首先在store里面創(chuàng)建modudel文件夾，分別創(chuàng)建homeDataStore.js和listDataStore.js,這兩個(gè)模塊就是分別存儲(chǔ)對(duì)應(yīng)頁(yè)面的數(shù)據(jù)，以上頁(yè)面展示可以看到我只在list頁(yè)面寫了數(shù)據(jù)，所以我們就把list頁(yè)面座位例子來(lái)講。

listDataStore.js代碼展示

import axios from 'axios'
const listData = {
  namespaced:true,//注意 模塊化管理數(shù)據(jù)請(qǐng)不要忘了命名空間的開(kāi)啟
  state:{
    List:[],
    count: 0,
    compoentData:[],
    number: 0

  },
  actions:{
    getListData(context){
      new Promise((resolve,reject)=>{
        axios.get('../../../static/listData.json').then((res)=>{
          context.commit('ListData',{'listDatas': res.data.listData})
        })
      })
    },
    handleAdd(context){
      context.commit("handleAddState")
    }
  
  },
  mutations:{
    ListData(state, paylod){
      state.List = paylod.listDatas
    },
    handleAddState(state){
      state.number++;
    }
  },
  getters: {
    List: state => state.List,
    count: state => state.count,
    number: state => state.number
  }
}
export default listData;

數(shù)據(jù)格式是一樣的，每個(gè)頁(yè)面都是這四大核心模塊組成

store文件夾下面的index.js文件展示

//這個(gè)是總的store，拋出各個(gè)模塊的store
import Vue from 'vue'
import Vuex from 'vuex'
import homeData from './moudel/homeDataStore'
import listData from './moudel/listDataStore'
Vue.use(Vuex)
const store = new Vuex.Store({  
modules:{ 
    homeData,
    listData,
  }})export default store;

在這里引入各個(gè)模塊的數(shù)據(jù)。

main.js文件展示

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({ 
 el: '#app', 
router, 
store, 
render: h => h(App)
})

引入store，將store注冊(cè)到vue的實(shí)例上面，這樣對(duì)應(yīng)模塊的數(shù)據(jù)基本格式是這樣，接下來(lái)在看看頁(yè)面中怎么調(diào)用的吧。

頁(yè)面使用store數(shù)據(jù)  列表頁(yè)展示

<template>
 <div> 
<router-link to='/'> 首頁(yè)home</router-link><br/>
這是列表頁(yè)list<br/>
<ul> 
<li v-for="item in List" v-bind:key="item.id">{{item.item}}</li> 
</ul>    
 <div>計(jì)算：</div>
    <div>{{number}}</div>
    <button @click='handleAdd()'>add</button> 
  </div></template><script>
import { mapGetters, mapActions } from 'vuex'
export default {  
name: 'list',
data(){    
return{}  
},  
computed:{    
  ...mapGetters('listData',['List','number'])  
},  
methods:{    
 //方法一： ...mapActions('listData',['getListData','handleAdd']),    
  //方法二：    
  ...mapActions({      
   getListData:"listData/getListData",      
   handleAdd:"listData/handleAdd"    
})  
},  
mounted(){    
  this.getListData();  
}}
</script>
<style></style>

引入import { mapGetters, mapActions } from 'vuex' 輔助函數(shù)，在computed計(jì)算屬性里面把對(duì)應(yīng)頁(yè)面的數(shù)據(jù)也就是列表頁(yè)對(duì)應(yīng)的列表頁(yè)的store拿到List number，也可以認(rèn)為是讀取里面的數(shù)據(jù)，將數(shù)據(jù)映射到頁(yè)面來(lái)，這樣就拿到了響應(yīng)的數(shù)據(jù)，methods里面是映射到頁(yè)面的方法，比如getListData方法就是走接口請(qǐng)求過(guò)來(lái)的數(shù)據(jù)，當(dāng)頁(yè)面加載完后調(diào)用，也就是在mounted。handleAdd方法也是派發(fā)，在對(duì)應(yīng)的actions里面可以看到。如果不用輔助函數(shù)，也就會(huì)用到dispatch，這里沒(méi)在細(xì)講

demo地址： https://github.com/cookie-zhang/vuex_Demo

六 總結(jié)

以上描述簡(jiǎn)單易懂，可以在項(xiàng)目中直接使用這種模塊化管理數(shù)據(jù)的方式，總體來(lái)看就更好的理解vux的流程圖，單向數(shù)據(jù)流連通起來(lái)就可以形成一個(gè)完美的閉環(huán)。 沒(méi)有太多文采，只想用最近單易懂的語(yǔ)言描述自己的理解，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。