如何更好的使用module vuex？

1、 前言

在項目如何使用vuex呢？之前我都是非模塊化去寫的，可能你們和我同樣也是這麼去寫，可是回過頭去看看vue的文檔，發現模塊化去使用vuex更好，vue是單頁面應用，其實只有一個頁面，那麼首頁也好列表頁也好，那都至關於這一個頁面的一個模塊，也能夠把它理解爲是一個一個的組件，畢竟組件化、組件抽離、組件封裝是比較火的，因此在使用vuex的模塊化的時候就能更好的去管理對應的模塊，對於數據分離和定位都很是的好。廢話有點多，先丟張圖。

Demo鏈接：github.com/cookie-zhan…

通訊之間仍是比較麻煩的，因此誕生了vuex。

2、 啥是vuex？

有人說是一個插件、有人說是一個倉庫。官方說的就比較好理解，Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。其實它就是對vue作數據管理的，更好的存儲數據、響應數據。

3、 何時最適合使用vuex？

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

4、 由圖講原理

   四大核心模塊：

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的裏面數據發生改變的惟一方式。

5、上Demo

初始化項目就不講了，根據文檔一步一步生成就能夠了

• 目錄結構：

頁面展現

模塊化數據

    首先在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的流程圖，單向數據流連通起來就能夠造成一個完美的閉環。 沒有太多文采，只想用最近單易懂的語言描述本身的理解，若是能幫到你那麼一丟丟，請給我一個小小的贊⊙_⊙！