文章目錄

• • • • • 一、單向數(shù)據(jù)流
        • • 1. 理念示意圖
          • 2. 簡述
        • 二、什么是全局狀態(tài)管理模式
        • 三、重點(diǎn)概念
        • • 3.1. 什么是全局狀態(tài)管理模式？
          • 3.2.全局狀態(tài)管理工具？
          • 3.3. 什么是 vuex
        • 四、在項(xiàng)目中導(dǎo)入 vuex
        • • 4.1. 狀態(tài)管理配置
          • 4.2. 注冊(cè)vuex
        • 五、測(cè)試 vuex 是否導(dǎo)入成功
        • • 5.1. 創(chuàng)建搜索模塊
          • 5.2. 注入模塊
          • 5.3. 頁面使用模塊中的數(shù)據(jù)
          • 5.4. 構(gòu)建 search 模塊
          • 5.5. 對(duì)vuex數(shù)據(jù)操作
        • 六、vuex數(shù)據(jù)持久化
        • • 6.1. 搜索模塊數(shù)據(jù)持久化
          • 6.2. 搜索api
          • 6.3. 頁面使用

一、單向數(shù)據(jù)流

1. 理念示意圖

“單向數(shù)據(jù)流” 理念示意圖

2. 簡述

• state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
• view，以聲明方式將 state 映射到視圖；
• actions，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。

但是，當(dāng)我們的應(yīng)用遇到**多個(gè)組件共享狀態(tài)（數(shù)據(jù)）**時(shí)，單向數(shù)據(jù)流的簡潔性很容易被破壞（回憶 search-blog 和 search-history 的代碼）：

• 多個(gè)視圖依賴于同一狀態(tài)（數(shù)據(jù)）。
• 來自不同視圖的行為需要變更同一狀態(tài)（數(shù)據(jù)）。

所以我們不得不通過 父子組件傳遞數(shù)據(jù) 的方式，來頻繁的修改狀態(tài)（數(shù)據(jù)）。但是這種方式是 非常脆弱，通常會(huì)導(dǎo)致無法維護(hù)的代碼。

二、什么是全局狀態(tài)管理模式

所以我們就需要就想到了一種方案，我們把：

把多個(gè)組件之間共用的數(shù)據(jù)抽離出來，通過一個(gè) 單例模式 進(jìn)行管理，而這種管理的方式就叫做【全局狀態(tài)管理模式】。

具備 【全局狀態(tài)管理模式】 的庫，就是 【全局狀態(tài)管理工具】

而在 vue 中存在一個(gè)專門的 【全局狀態(tài)管理工具】，叫做 vuex。

因?yàn)?uniapp 追隨 vue 和 微信小程序 的語法，所以我們可以在 uniapp 中使用 vuex 來進(jìn)行 【全局狀態(tài)管理】，并且這是一個(gè) 非常被推薦 的選擇。

三、重點(diǎn)概念

3.1. 什么是全局狀態(tài)管理模式？

模式：把多個(gè)組件之間共用的數(shù)據(jù)抽離出來，通過一個(gè) 單例模式 進(jìn)行管理。

3.2.全局狀態(tài)管理工具？

工具：具備 【全局狀態(tài)管理模式】 的庫

3.3. 什么是 vuex

對(duì) vue 應(yīng)用程序進(jìn)行全局狀態(tài)管理的工具

四、在項(xiàng)目中導(dǎo)入 vuex

4.1. 狀態(tài)管理配置

在項(xiàng)目根目錄下創(chuàng)建store文件夾，并在store文件夾下創(chuàng)建index.js
內(nèi)容如下：

// 1. 導(dǎo)入 Vue 和 Vuex import Vue from 'vue';// uniapp 已默認(rèn)安裝，不需要重新下載 import Vuex from 'vuex';// 2. 安裝 Vuex 插件 Vue.use(Vuex);// 3. 創(chuàng)建 store 實(shí)例 const store = new Vuex.Store({});export default store;

4.2. 注冊(cè)vuex

在 main.js 中注冊(cè) vuex 插件

// 導(dǎo)入 vuex 實(shí)例 import store from './store'; ...const app = new Vue({...App,store // 掛載實(shí)例對(duì)象 }); app.$mount();

五、測(cè)試 vuex 是否導(dǎo)入成功

，可以按照模塊單獨(dú)配置，然后，在index.js中引入，來進(jìn)行對(duì)各模塊的統(tǒng)一狀態(tài)管理

5.1. 創(chuàng)建搜索模塊

在store文件夾下，創(chuàng)建modules文件夾，并在此文件夾下創(chuàng)建search模塊（search.js）
內(nèi)容如下：

export default {// 獨(dú)立命名空間namespaced: true,// 通過 state 聲明數(shù)據(jù)state: () => {return {msg: 'hello vuex'};} };

5.2. 注入模塊

在 index.js 中注入模塊

... // 導(dǎo)入 search.js 暴露的對(duì)象 import search from './modules/search';// 2. 安裝 Vuex 插件 Vue.use(Vuex); // 3. 創(chuàng)建 store 實(shí)例 const store = new Vuex.Store({modules: {search} }); export default store;

5.3. 頁面使用模塊中的數(shù)據(jù)

有3步：

導(dǎo)入 mapState 函數(shù)

在 computed 中，通過 mapState 函數(shù)，注冊(cè) state 中的數(shù)據(jù)，導(dǎo)入之后的數(shù)據(jù)可直接使用（就像使用 data 中的數(shù)據(jù)一樣）
// mapState(模塊名, [‘字段名’,‘字段名’,‘字段名’])

使用導(dǎo)入的 vuex 模塊中的數(shù)據(jù)

在index.vue 中使用 模塊中的數(shù)據(jù)

<template><view class="search-blog-container"><!-- 3. 使用導(dǎo)入的 vuex 模塊中的數(shù)據(jù) --><view>{{ msg }}</view>...</view> </template><script> // 1. 導(dǎo)入 mapState 函數(shù) import { mapState } from 'vuex'; ... export default {...computed: {// 2. 在 computed 中，通過 mapState 函數(shù)，注冊(cè) state 中的數(shù)據(jù)，導(dǎo)入之后的數(shù)據(jù)可直接使用（就像使用 data 中的數(shù)據(jù)一樣）// mapState(模塊名, ['字段名','字段名','字段名'])...mapState('search', ['msg'])} }; </script>

5.4. 構(gòu)建 search 模塊

search.js

export default {// 獨(dú)立命名空間namespaced: true,// 通過 state 聲明數(shù)據(jù)state: () => ({searchData: []}),// 更改 state 數(shù)據(jù)的唯一方式是：提交 mutationsmutations: {/*** 添加數(shù)據(jù)*/addSearchData(state, val) {if (!val) return;const index = state.searchData.findIndex((item) => item === val);if (index !== -1) {state.searchData.splice(index, 1);}state.searchData.unshift(val);},/*** 刪除指定數(shù)據(jù)*/removeSearchData(state, index) {state.searchData.splice(index, 1);},/*** 刪除所有數(shù)據(jù)*/removeAllSearchData(state) {state.searchData = [];}} };

5.5. 對(duì)vuex數(shù)據(jù)操作

對(duì)vuex數(shù)據(jù)操作步驟：

導(dǎo)入mapMutations 函數(shù)，處理mutation的問題

利用 mapMutations函數(shù)，可以直接把vuex中的mutation合并到當(dāng)前組件的methods中，合并之后，使用mutation就像使用methods中的方法一樣

<template><view class="hot-container"><view v-for="(item, index) in tabData" :key="index">{{ item.label }} - {{ index }}</view></view> </template><script> // 1. 導(dǎo)入 mapState 函數(shù) // 2. 導(dǎo)入mapMutations 函數(shù)，處理mutation的問題 import { mapState, mapMutations } from 'vuex'; import { getHotTabs } from 'api/hot'; export default {data() {return {tabData: [],};},// 組件實(shí)例配置完成，但是DOM尚未渲染，進(jìn)行網(wǎng)絡(luò)請(qǐng)求，配置響應(yīng)數(shù)據(jù)created() {this.loadHotTabs();},methods: {// 利用 mapMutations函數(shù)，可以直接把vuex中的mutation合并到當(dāng)前組件的methods中，合并之后，// 使用mutation就像使用methods中的方法一樣...mapMutations('search', ['removeSearchData', 'removeAllSearchData']),// 刪除所有數(shù)據(jù)onDelAllClick() {this.removeAllSearchData();},// 刪除指定數(shù)據(jù) index角標(biāo)onClearAll(item, index) {this.removeSearchData(index);},/*** 獲取熱搜標(biāo)題數(shù)據(jù)*/async loadHotTabs() {// uniapp 支持 async awaitconst res= await getHotTabs();this.tabData = res.content;console.log('res', res.content);},},computed: {// 2. 在 computed 中，通過 mapState 函數(shù)，注冊(cè) state 中的數(shù)據(jù)，導(dǎo)入之后的數(shù)據(jù)可直接使用（就像使用 data 中的數(shù)據(jù)一樣）// mapState(模塊名, ['字段名','字段名','字段名'])...mapState('search', ['searchData']),}, }; </script><style lang="scss"></style>

六、vuex數(shù)據(jù)持久化

已完成 數(shù)據(jù)和組件的分離，所以【數(shù)據(jù)持久化】不需要涉及到組件內(nèi)的代碼
用到的api是uni.setStorage，參數(shù)key value形式
案例演示：搜索模塊

6.1. 搜索模塊數(shù)據(jù)持久化

store/search.js

const STORAGE_KEY = 'search-list'; const HISTORY_MAX = 10;export default {// 獨(dú)立命名空間namespaced: true,// 通過 state 聲明數(shù)據(jù)state: () => ({// 優(yōu)先從 storage 中讀取searchData: uni.getStorageSync(STORAGE_KEY) || []}),// 更改 state 數(shù)據(jù)的唯一方式是：提交 mutationsmutations: {/*** 保存數(shù)據(jù)到 storage*/saveToStorage(state) {uni.setStorage({key: STORAGE_KEY,data: state.searchData});},/*** 添加數(shù)據(jù)*/addSearchData(state, val) {if (!val) return;const index = state.searchData.findIndex((item) => item === val);if (index !== -1) {state.searchData.splice(index, 1);}// 判斷是否超過了最大緩存數(shù)量if (state.searchData.length > HISTORY_MAX) {state.searchData.splice(HISTORY_MAX - 1, state.searchData.length - HISTORY_MAX - 1);}state.searchData.unshift(val);// 調(diào)用 saveToStoragethis.commit('search/saveToStorage');},/*** 刪除指定數(shù)據(jù)*/removeSearchData(state, index) {state.searchData.splice(index, 1);// 調(diào)用 saveToStoragethis.commit('search/saveToStorage');},/*** 刪除所有數(shù)據(jù)*/removeAllSearchData(state) {state.searchData = [];// 調(diào)用 saveToStoragethis.commit('search/saveToStorage');}} };

6.2. 搜索api

搜索結(jié)果 - 獲取搜索結(jié)果數(shù)據(jù)

import request from '../utils/request';/*** 搜索結(jié)果*/ export function getSearchResult(data) {return request({url: '/search',data}); }

6.3. 頁面使用

search-result-list.vue

<template><view> 搜索結(jié)果 </view> </template><script> import { getSearchResult } from 'api/search'; export default {name: 'search-result-list',props: {// 搜索關(guān)鍵字queryStr: {type: String,required: true}},data() {return {// 數(shù)據(jù)源resultList: [],// 頁數(shù)page: 1};},created() {this.loadSearchResult();},methods: {/*** 獲取搜索數(shù)據(jù)*/async loadSearchResult() {const { data: res } = await getSearchResult({q: this.queryStr,p: this.page});this.resultList = res.list;console.log(this.resultList);}} }; </script><style lang="scss"></style>

總結(jié)

以上是生活随笔為你收集整理的状态管理 - 全局状态管理工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。