文章目錄

• • • • • 一、單向數據流
        • • 1. 理念示意圖
          • 2. 簡述
        • 二、什么是全局狀態管理模式
        • 三、重點概念
        • • 3.1. 什么是全局狀態管理模式？
          • 3.2.全局狀態管理工具？
          • 3.3. 什么是 vuex
        • 四、在項目中導入 vuex
        • • 4.1. 狀態管理配置
          • 4.2. 注冊vuex
        • 五、測試 vuex 是否導入成功
        • • 5.1. 創建搜索模塊
          • 5.2. 注入模塊
          • 5.3. 頁面使用模塊中的數據
          • 5.4. 構建 search 模塊
          • 5.5. 對vuex數據操作
        • 六、vuex數據持久化
        • • 6.1. 搜索模塊數據持久化
          • 6.2. 搜索api
          • 6.3. 頁面使用

一、單向數據流

1. 理念示意圖

“單向數據流” 理念示意圖

2. 簡述

• state，驅動應用的數據源；
• view，以聲明方式將 state 映射到視圖；
• actions，響應在 view 上的用戶輸入導致的狀態變化。

但是，當我們的應用遇到**多個組件共享狀態（數據）**時，單向數據流的簡潔性很容易被破壞（回憶 search-blog 和 search-history 的代碼）：

• 多個視圖依賴于同一狀態（數據）。
• 來自不同視圖的行為需要變更同一狀態（數據）。

所以我們不得不通過 父子組件傳遞數據 的方式，來頻繁的修改狀態（數據）。但是這種方式是 非常脆弱，通常會導致無法維護的代碼。

二、什么是全局狀態管理模式

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

把多個組件之間共用的數據抽離出來，通過一個 單例模式 進行管理，而這種管理的方式就叫做【全局狀態管理模式】。

具備 【全局狀態管理模式】 的庫，就是 【全局狀態管理工具】

而在 vue 中存在一個專門的 【全局狀態管理工具】，叫做 vuex。

因為 uniapp 追隨 vue 和 微信小程序 的語法，所以我們可以在 uniapp 中使用 vuex 來進行 【全局狀態管理】，并且這是一個 非常被推薦 的選擇。

三、重點概念

3.1. 什么是全局狀態管理模式？

模式：把多個組件之間共用的數據抽離出來，通過一個 單例模式 進行管理。

3.2.全局狀態管理工具？

工具：具備 【全局狀態管理模式】 的庫

3.3. 什么是 vuex

對 vue 應用程序進行全局狀態管理的工具

四、在項目中導入 vuex

4.1. 狀態管理配置

在項目根目錄下創建store文件夾，并在store文件夾下創建index.js
內容如下：

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

4.2. 注冊vuex

在 main.js 中注冊 vuex 插件

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

五、測試 vuex 是否導入成功

，可以按照模塊單獨配置，然后，在index.js中引入，來進行對各模塊的統一狀態管理

5.1. 創建搜索模塊

在store文件夾下，創建modules文件夾，并在此文件夾下創建search模塊（search.js）
內容如下：

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

5.2. 注入模塊

在 index.js 中注入模塊

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

5.3. 頁面使用模塊中的數據

有3步：

導入 mapState 函數

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

使用導入的 vuex 模塊中的數據

在index.vue 中使用 模塊中的數據

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

5.4. 構建 search 模塊

search.js

export default {// 獨立命名空間namespaced: true,// 通過 state 聲明數據state: () => ({searchData: []}),// 更改 state 數據的唯一方式是：提交 mutationsmutations: {/*** 添加數據*/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);},/*** 刪除指定數據*/removeSearchData(state, index) {state.searchData.splice(index, 1);},/*** 刪除所有數據*/removeAllSearchData(state) {state.searchData = [];}} };

5.5. 對vuex數據操作

對vuex數據操作步驟：

導入mapMutations 函數，處理mutation的問題

利用 mapMutations函數，可以直接把vuex中的mutation合并到當前組件的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. 導入 mapState 函數 // 2. 導入mapMutations 函數，處理mutation的問題 import { mapState, mapMutations } from 'vuex'; import { getHotTabs } from 'api/hot'; export default {data() {return {tabData: [],};},// 組件實例配置完成，但是DOM尚未渲染，進行網絡請求，配置響應數據created() {this.loadHotTabs();},methods: {// 利用 mapMutations函數，可以直接把vuex中的mutation合并到當前組件的methods中，合并之后，// 使用mutation就像使用methods中的方法一樣...mapMutations('search', ['removeSearchData', 'removeAllSearchData']),// 刪除所有數據onDelAllClick() {this.removeAllSearchData();},// 刪除指定數據 index角標onClearAll(item, index) {this.removeSearchData(index);},/*** 獲取熱搜標題數據*/async loadHotTabs() {// uniapp 支持 async awaitconst res= await getHotTabs();this.tabData = res.content;console.log('res', res.content);},},computed: {// 2. 在 computed 中，通過 mapState 函數，注冊 state 中的數據，導入之后的數據可直接使用（就像使用 data 中的數據一樣）// mapState(模塊名, ['字段名','字段名','字段名'])...mapState('search', ['searchData']),}, }; </script><style lang="scss"></style>

六、vuex數據持久化

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

6.1. 搜索模塊數據持久化

store/search.js

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

6.2. 搜索api

搜索結果 - 獲取搜索結果數據

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

6.3. 頁面使用

search-result-list.vue

<template><view> 搜索結果 </view> </template><script> import { getSearchResult } from 'api/search'; export default {name: 'search-result-list',props: {// 搜索關鍵字queryStr: {type: String,required: true}},data() {return {// 數據源resultList: [],// 頁數page: 1};},created() {this.loadSearchResult();},methods: {/*** 獲取搜索數據*/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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。