[TOC] #### 1. uniapp 中 vuex 的介紹 --- uniapp 內(nèi)置了 vuex，不需像 vue 腳手架那樣里通過 npm 安裝了，我們只需要引用就行了 #### 2. uniapp 中 vuex 的使用 --- 在 uniapp 根目錄創(chuàng)建 `store/index.js` 文件 ```javascript // 1. 引入vue 和 vuex import Vue from 'vue'; import Vuex from 'vuex'; // 2. 安裝插件 Vue.use(Vuex) // 3. 導(dǎo)入對(duì)象 const store = new Vuex.Store({ }) // 4. 默認(rèn)導(dǎo)出 store export default store ``` 在 uniapp 根目錄下的 main.js 中新增下面兩處修改，導(dǎo)入 store 對(duì)象，并將 store 對(duì)象掛載到 vue 實(shí)例中  修改 `store/index.js` 文件，在 vuex 中添加一個(gè)數(shù)據(jù) ```javascript const store = new Vuex.Store({ state: { name: 'liang' } }) ``` 在頁面中使用 vuex 數(shù)據(jù)（下面 computed 的兩種寫法都是正確的）: ``` <template> <view> {{ name }} </view> </template> <script> import { mapState } from 'vuex'; export default { // computed: mapState(['name']), computed: { ...mapState(['name']) } } </script> ``` 通過修改 main.js 我們可以把 store 對(duì)象掛載到 `uni` 上 ```javascript uni.$store = store ``` 然后，在頁面中可以通過下面方式獲取到 vuex 中的數(shù)據(jù) ```javascript // this 是 vue 實(shí)例，所以，當(dāng)掛載到 Vue 上時(shí)要注意 this 的指向 this.$store.state // 掛載到 uni 上時(shí)獲取 vuex 數(shù)據(jù) uni.$store.state ``` #### 3. require.context 介紹 --- `require.context` 是 webpack 提供的一個(gè) api，該 api 可以實(shí)現(xiàn)工程自動(dòng)化（遍歷文件夾中的文件，自動(dòng)導(dǎo)入模塊） 語法格式: ```javascript // directory 檢索的目錄 // useSubdirectories 是否檢索子目錄，取值: true | false // 匹配文件的正則表達(dá)式，一般用于匹配文件名 require.context(directory, useSubdirectories, regExp) ``` 使用示例: ```javascript // 匹配當(dāng)前目錄下的 modules 中所有以 .js 結(jié)尾的文件 // require.context 的返回值是一個(gè)函數(shù) const files = require.context("./modules", false, /\.js$/); // files.keys() 匹配到的文件 // ['./common.js', './user.js'] files.keys().forEach(key => { // files(key) 文件 export 出的數(shù)據(jù) const data = files(key) }); ``` #### 4. vuex 模塊分離 --- **我當(dāng)前所在的公司有一套前端基礎(chǔ)框架，這是一個(gè) uniapp 項(xiàng)目，對(duì) vuex 進(jìn)行了模塊分離處理。當(dāng) vuex 需要存儲(chǔ)的數(shù)據(jù)比較多時(shí)，比如有：用戶，購物車，積分商城等模塊，為了方便管理，對(duì)應(yīng)前面三個(gè)功能可以分離出三個(gè)模塊文件，但并沒有使用 vuex 的模塊化** ``` // tore/modules/user.js 用戶模塊 export const state = { token: '' } // store/modules/cart.js 購物車模塊 export const state = { cart: [] } // store/index.js 模塊合并之后 export const state = { token: '', cart: [] } ``` **下面是我們公司模塊分離方式的代碼示例:** a. 分離出的模塊文件: `store/modules/*.js` ```javascript export const state = {} export const mutations = {} export const actions = {} ``` b. 在 `store/index.js` 中導(dǎo)入模塊化的文件，合并對(duì)象屬性 ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex) const files = require.context("./modules", false, /\.js$/); const modules = { state: {}, mutations: {}, actions: {} }; files.keys().forEach(key => { Object.assign(modules.state, files(key)["state"]); Object.assign(modules.mutations, files(key)["mutations"]); Object.assign(modules.actions, files(key)["actions"]); }); const store = new Vuex.Store(modules) export default store ``` #### 5. vuex 模塊分離 - 代碼優(yōu)化 --- 上面模塊分離是我們公司的前端基礎(chǔ)框架的代碼，但我覺得可以將代碼再優(yōu)化一下 通過上面代碼可以發(fā)現(xiàn)，抽離出的模塊文件代碼是這樣的: ```javascript export const state = {} export const mutations = {} export const actions = {} ``` 給 vuex 的幾個(gè)屬性都定義了常量，然后再分別導(dǎo)出，我不想這樣寫，可以這樣導(dǎo)出 ```javascript export default { state: { }, mutations: {}, actions: {} } ``` `store/index.js` 中的 `files.keys().forEach()` 需要修改下: ```javascript files.keys().forEach(key => { Object.keys(modules).forEach(item => { Object.assign(modules[item], files(key).default[item]) }) }); ```