如何更好的使用module vuex？

cookie-zhang發表於2019-03-26
Vue


一、 前言

在專案如何使用vuex呢？以前我都是非模組化去寫的，可能大家和我一樣也是這麼去寫，但是回過頭去看看vue的文件，發現模組化去使用vuex更好，vue是單頁面應用，其實只有一個頁面，那麼首頁也好列表頁也好，那都相當於這一個頁面的一個模組，也可以把它理解為是一個一個的元件，畢竟元件化、元件抽離、元件封裝是比較火的，所以在使用vuex的模組化的時候就能更好的去管理對應的模組，對於資料分離和定位都非常的好。廢話有點多，先丟張圖。

Demo連線：github.com/cookie-zhan…

如何更好的使用module vuex？

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

二、 啥是vuex？

有人說是一個外掛、有人說是一個倉庫。官方說的就比較好理解，Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。其實它就是對vue做資料管理的，更好的儲存資料、響應資料。

三、 什麼時候最適合使用vuex？

引用官方語言：Vuex 可以幫助我們管理共享狀態，並附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的store模式就足夠您所需了，但是，如果您需要構建一個大型單頁應用，您很可能會考慮如何更好的在元件外部管理狀態，Vuex將會成為自然選擇。

四、 由圖講原理

如何更好的使用module vuex？

   四大核心模組：

  1. state: 翻譯：狀態，state其實是資料狀態管理物件，在這裡你可以初始化一些你想要的資料。
  2. getter: 翻譯： 獲得者，getter是對state的資料物件的讀取，getters從表面是獲得的意思，可以把他看作在獲取資料之前進行的一種再編輯,相當於對資料的一個過濾和加工。getters就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算
  3. Actions：翻譯：行動，Actions裡面我們可以定義我們想執行非同步的方法，在這裡它並不會立即去執行，而是在頁面中去dispatch這個方法，提交mutations，而不是直接去改變狀態，在頁面中有兩種方式去做派發，第一種  this.$store.dispatch('xxx') 第二種 可以使用mapActions 輔助函式將元件的 methods 對映為 store.dispatch 呼叫（Demo中有體現）
  4. mutations：翻譯： 突變，mutations裡面可寫很多的改變狀態的方法，也就是像翻譯一樣，可以改變state裡面的資料，試講state的裡面資料發生改變的唯一方式。

五、上Demo

初始化專案就不講了，根據文件一步一步生成就可以了

  • 目錄結構：

如何更好的使用module vuex？

頁面展示

如何更好的使用module vuex？

如何更好的使用module vuex？

模組化資料

    首先在store裡面建立modudel資料夾，分別建立homeDataStore.js和listDataStore.js,這兩個模組就是分別儲存對應頁面的資料，以上頁面展示可以看到我只在list頁面寫了資料，所以我們就把list頁面作為例子來講。

listDataStore.js程式碼展示

import axios from 'axios'
const listData = {
    namespaced:true,//注意 模組化管理資料請不要忘了名稱空間的開啟
    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;
複製程式碼

資料格式是一樣的，每個頁面都是這四大核心模組組成

store資料夾下面的index.js檔案展示

//這個是總的store，丟擲各個模組的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;複製程式碼

在這裡引入各個模組的資料。

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註冊到vue的例項上面，這樣對應模組的資料基本格式是這樣，接下來在看看頁面中怎麼呼叫的吧。

頁面使用store資料  列表頁展示

<template>
 <div> 
<router-link to='/'> 首頁home</router-link><br/>
這是列表頁list<br/>
<ul> 
<li v-for="item in List" v-bind:key="item.id">{{item.item}}</li> 
</ul>       
 <div>計算：</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' 輔助函式，在computed計算屬性裡面把對應頁面的資料也就是列表頁對應的列表頁的store拿到List number，也可以認為是讀取裡面的資料，將資料對映到頁面來，這樣就拿到了響應的資料，methods裡面是對映到頁面的方法，比如getListData方法就是走介面請求過來的資料，當頁面載入完後呼叫，也就是在mounted。handleAdd方法也是派發，在對應的actions裡面可以看到。如果不用輔助函式，也就會用到dispatch，這裡沒在細講

demo地址：github.com/cookie-zhan…

六 總結

以上描述簡單易懂，可以在專案中直接使用這種模組化管理資料的方式，總體來看就更好的理解vux的流程圖，單向資料流連通起來就可以形成一個完美的閉環。 沒有太多文采，只想用最近單易懂的語言描述自己的理解，如果能幫到你那麼一丟丟，請給我一個小小的贊⊙_⊙！


相關文章