一、 前言

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),東明企業(yè)網(wǎng)站建設(shè),東明品牌網(wǎng)站建設(shè),網(wǎng)站定制,東明網(wǎng)站建設(shè)報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,東明網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

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

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

二、 啥是vuex？

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

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

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

四、 由圖講原理

四大核心模塊：

• state: 翻譯：狀態(tài)，state其實是數(shù)據(jù)狀態(tài)管理對象，在這里你可以初始化一些你想要的數(shù)據(jù)。
• getter: 翻譯： 獲得者，getter是對state的數(shù)據(jù)對象的讀取，getters從表面是獲得的意思，可以把他看作在獲取數(shù)據(jù)之前進行的一種再編輯,相當于對數(shù)據(jù)的一個過濾和加工。getters就像計算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當它的依賴值發(fā)生了改變才會被重新計算
• Actions：翻譯：行動，Actions里面我們可以定義我們想執(zhí)行異步的方法，在這里它并不會立即去執(zhí)行，而是在頁面中去dispatch這個方法，提交mutations，而不是直接去改變狀態(tài)，在頁面中有兩種方式去做派發(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

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

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

頁面展示

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

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

listDataStore.js代碼展示

import axios from 'axios'
const listData = {
  namespaced:true,//注意 模塊化管理數(shù)據(jù)請不要忘了命名空間的開啟
  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ù)格式是一樣的，每個頁面都是這四大核心模塊組成

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;

在這里引入各個模塊的數(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注冊到vue的實例上面，這樣對應模塊的數(shù)據(jù)基本格式是這樣，接下來在看看頁面中怎么調(diào)用的吧。

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

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

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

六 總結(jié)

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