詳解如何更好的使用module vuex

來源：懂視網責編：小采時間：2020-11-27 21:59:44

詳解如何更好的使用module vuex

詳解如何更好的使用module vuex:一、前言在項目如何使用vuex呢？以前我都是非模塊末去寫的，可能大家和我一樣也是這么去寫，但是回過頭去看看vue的文檔，發現模塊化去使用vuex更好，vue是單頁面應用，其實只有一個頁面，那么首頁也好列表頁也好，那都相當于這一個頁面的一個模塊，也可以把

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解如何更好的使用module vuex:一、前言在項目如何使用vuex呢？以前我都是非模塊末去寫的，可能大家和我一樣也是這么去寫，但是回過頭去看看vue的文檔，發現模塊化去使用vuex更好，vue是單頁面應用，其實只有一個頁面，那么首頁也好列表頁也好，那都相當于這一個頁面的一個模塊，也可以把

一、前言

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

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

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

二、啥是vuex？

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

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

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

四、由圖講原理

四大核心模塊：

state: 翻譯：狀態，state其實是數據狀態管理對象，在這里你可以初始化一些你想要的數據。

getter: 翻譯：獲得者，getter是對state的數據對象的讀取，getters從表面是獲得的意思，可以把他看作在獲取數據之前進行的一種再編輯,相當于對數據的一個過濾和加工。getters就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算

Actions：翻譯：行動，Actions里面我們可以定義我們想執行異步的方法，在這里它并不會立即去執行，而是在頁面中去dispatch這個方法，提交mutations，而不是直接去改變狀態，在頁面中有兩種方式去做派發，第一種 this.$store.dispatch('xxx') 第二種可以使用mapActions 輔助函數將組件的 methods 映射為 store.dispatch 調用（Demo中有體現）

mutations：翻譯：突變，mutations里面可寫很多的改變狀態的方法，也就是像翻譯一樣，可以改變state里面的數據，試講state的里面數據發生改變的唯一方式。

五、上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地址： https://github.com/cookie-zhang/vuex_Demo

六總結

以上描述簡單易懂，可以在項目中直接使用這種模塊化管理數據的方式，總體來看就更好的理解vux的流程圖，單向數據流連通起來就可以形成一個完美的閉環。沒有太多文采，只想用最近單易懂的語言描述自己的理解，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com