Vue.js前端開發(fā)實(shí)戰(zhàn)（第2版） 課件 第7章 網(wǎng)絡(luò)請求和狀態(tài)管理

第7章網(wǎng)絡(luò)請求和狀態(tài)管理《Vue.js前端開發(fā)實(shí)戰(zhàn)（第2版）》學(xué)習(xí)目標(biāo)/Target

了解Axios的基本概念，能夠說出Axios的功能和主要特性

掌握Axios的安裝和使用方法，能夠在項(xiàng)目中安裝并使用Axios掌握Axios圖書列表案例的實(shí)現(xiàn)，能夠使用Axios完成網(wǎng)絡(luò)請求

了解Vuex的基本概念，能夠說出Vuex的工作原理學(xué)習(xí)目標(biāo)/Target

掌握Vuex的安裝和使用方法，能夠在項(xiàng)目中安裝并使用Vuex

掌握Vuex計(jì)數(shù)器案例的實(shí)現(xiàn)，能夠運(yùn)用Vuex完成計(jì)數(shù)器效果

了解Pinia的基本概念，能夠說出Pinia的功能和優(yōu)點(diǎn)

掌握Pinia的安裝和使用方法，能夠在項(xiàng)目中安裝并使用Pinia學(xué)習(xí)目標(biāo)/Target

掌握Pinia計(jì)數(shù)器案例的實(shí)現(xiàn)，能夠運(yùn)用Pinia完成計(jì)數(shù)器效果

熟悉Pinia模塊化，能夠闡述Pinia模塊化的實(shí)現(xiàn)原理掌握Pinia持久化存儲(chǔ)，能夠運(yùn)用Pinia實(shí)現(xiàn)全部數(shù)據(jù)或部分?jǐn)?shù)據(jù)的持久化存儲(chǔ)章節(jié)概述/Summary在前面的開發(fā)案例中，數(shù)據(jù)都是直接定義在組件中的；而在實(shí)際開發(fā)中，項(xiàng)目的數(shù)據(jù)需要從服務(wù)器中獲得。當(dāng)我們希望互聯(lián)網(wǎng)上的其他用戶訪問我們自己編寫的網(wǎng)頁時(shí)，就需要用到服務(wù)器了。在傳統(tǒng)的網(wǎng)頁開發(fā)中，一般使用Ajax實(shí)現(xiàn)JavaScript程序與服務(wù)器交互，而在Vue中，則更推薦使用Axios實(shí)現(xiàn)JavaScript程序與服務(wù)器交互。如果希望在項(xiàng)目中跨組件或頁面存儲(chǔ)、共享一些數(shù)據(jù)以實(shí)現(xiàn)數(shù)據(jù)的狀態(tài)管理，可以使用Vuex和Pinia。本章將講解Axios、Vuex和Pinia的使用。目錄/Contents7.17.27.3AxiosVuexPiniaAxios7.1

先定一個(gè)小目標(biāo)！了解Axios的基本概念，能夠說出Axios的功能和主要特性7.1.1Axios概述什么是Axios？7.1.1Axios概述Axios是一個(gè)基于Promise的HTTP庫，可以發(fā)送get、post等請求，它作用于瀏覽器和Node.js中。當(dāng)運(yùn)行在瀏覽器時(shí)，使用XMLHttpRequest接口發(fā)送請求；當(dāng)運(yùn)行在Node.js時(shí)，使用HTTP對象發(fā)送請求。7.1.1Axios概述7.1.1Axios概述Axios的主要特性如下。支持所有的

API。支持?jǐn)r截請求和響應(yīng)?？梢赞D(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，并可以將響應(yīng)的內(nèi)容自動(dòng)轉(zhuǎn)換為JSON類型的數(shù)據(jù)。安全性高，客戶端支持防御跨站請求偽造（Cross-SiteRequestForgery，CSRF）。

先定一個(gè)小目標(biāo)！掌握Axios的安裝方法，能夠在項(xiàng)目中安裝Axios7.1.2安裝Axios通過標(biāo)簽引入使用Unpkg或jsDelivr的內(nèi)容分發(fā)網(wǎng)絡(luò)服務(wù)提供的Axios文件，也可以將Axios文件下載至本地再引入。使用包管理工具安裝使用npm或yarn包管理工具安裝Axios。Axios的安裝方式主要有兩種，一種是通過標(biāo)簽引入，另一種是使用包管理工具安裝。

7.1.2安裝Axios7.1.2安裝Axios①使用Unpkg的CDN服務(wù)引入Axios。1.通過標(biāo)簽引入<scriptsrc="/axios/dist/axios.min.js"></script>②使用jsDelivr的CDN服務(wù)引入Axios。<scriptsrc="/npm/axios/dist/axios.min.js"></script>讀者也可以從Axios官方網(wǎng)站中直接下載Axios，下載后再將文件引入網(wǎng)頁。因?yàn)樾枰獙⑽募螺d到本地，所以不需要考慮無網(wǎng)絡(luò)的情況。注意7.1.2安裝Axios使用npm或yarn包管理工具安裝Axios。2.使用包管理工具安裝#使用npm包管理工具安裝npminstallaxios--save#使用yarn包管理工具安裝yarnaddaxios--save在Vue3項(xiàng)目中使用yarn安裝Axios打開命令提示符，切換到D:\vue\chapter07目錄，使用yarn創(chuàng)建一個(gè)名稱為my-axios的項(xiàng)目。yarncreatevitemy-axios--templatevue項(xiàng)目名稱7.1.2安裝Axios步驟1步驟3步驟2在Vue3項(xiàng)目中使用yarn安裝Axios7.1.2安裝Axios步驟1步驟3步驟2在命令提示符中，切換到my-axios目錄，為項(xiàng)目安裝所有依賴。cdmy-axiosyarn在my-axios目錄下使用yarn安裝Axios。yarnaddaxios@1.2.1--save@1.2.1表示安裝Axios的版本號(hào)項(xiàng)目運(yùn)行時(shí)依賴7.1.2安裝Axios在Vue3項(xiàng)目中使用yarn安裝Axios步驟1步驟3步驟2使用VSCode編輯器打開my-axios目錄，執(zhí)行命令啟動(dòng)服務(wù)。7.1.2安裝Axios在Vue3項(xiàng)目中使用yarn安裝Axiosyarndev項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開啟一個(gè)本地服務(wù)，地址為:5173/。步驟1步驟3步驟2

先定一個(gè)小目標(biāo)！掌握Axios的使用方法，能夠在項(xiàng)目中使用Axios7.1.3使用AxiosAxios安裝完成后，如何使用呢？7.1.3使用Axios在項(xiàng)目中使用Axios時(shí)，通常的做法是先將Axios封裝成一個(gè)模塊，然后在組件中導(dǎo)入模塊。7.1.3使用Axios7.1.3使用Axios①將Axios封裝成模塊，創(chuàng)建src\axios\request.js文件。importaxiosfrom'axios'constrequest=axios.create({timeout:2000})exportdefaultrequest②在組件中導(dǎo)入模塊，在src\App.vue文件中導(dǎo)入模塊。importrequestfrom'./axios/request.js'7.1.3使用AxiosAxios常用的請求方式：get請求和post請求。request({url:'請求路徑',method:'get',params:{參數(shù)}}).then(res=>{console.log(res)}).catch(error=>{console.log(error)})①使用Axios發(fā)送get請求的基本語法格式。request({url:'請求路徑',method:'post',data:{參數(shù)}}).then(res=>{console.log(res)}).catch(error=>{console.log(error)})②使用Axios發(fā)送post請求的基本語法格式。

先定一個(gè)小目標(biāo)！掌握Axios圖書列表案例的實(shí)現(xiàn)，能夠使用Axios完成網(wǎng)絡(luò)請求7.1.4Axios圖書列表案例7.1.4Axios圖書列表案例使用Axios實(shí)現(xiàn)圖書列表案例，圖書列表頁面初始效果如下圖所示。7.1.4Axios圖書列表案例單擊上圖中“請求數(shù)據(jù)”按鈕，數(shù)據(jù)請求成功頁面效果如下圖所示。圖書列表案例的實(shí)現(xiàn)分為以下2步。模擬數(shù)據(jù)1請求數(shù)據(jù)27.1.4Axios圖書列表案例模擬數(shù)據(jù)：為了方便演示，使用mockjs模擬后端接口，下面講解如何安裝mockjs，以及編寫模擬數(shù)據(jù)和配置模擬數(shù)據(jù)的相關(guān)信息。7.1.4Axios圖書列表案例步驟1在my-axios目錄下，使用yarn安裝mockjs。步驟3步驟4步驟2使用mockjs模擬后端接口7.1.4Axios圖書列表案例yarnaddmockjs@1.1.0--save創(chuàng)建src\mock\books.json文件，該文件用于存放模擬的數(shù)據(jù)。[{"id":1,"name":"西游記","author":"吳承恩"},{"id":2,"name":"紅樓夢","author":"曹雪芹"},步驟3步驟4步驟1步驟27.1.4Axios圖書列表案例使用mockjs模擬后端接口>>接上頁代碼

{"id":3,"name":"三國演義","author":"羅貫中"},{"id":4,"name":"水滸傳","author":"施耐庵"}]步驟3步驟4步驟1步驟27.1.4Axios圖書列表案例使用mockjs模擬后端接口創(chuàng)建src\mock\mockServer.js文件，該文件用于配置模擬數(shù)據(jù)的相關(guān)信息。importMockfrom'mockjs'importbooksfrom'./books.json'Mock.mock('/mock/getBooks','get',{code:200, //請求成功的狀態(tài)碼

data:books //模擬的請求數(shù)據(jù)})步驟3步驟4步驟1步驟27.1.4Axios圖書列表案例使用mockjs模擬后端接口修改src\main.js文件，在創(chuàng)建Vue應(yīng)用實(shí)例前導(dǎo)入mockServer.js文件。import'./mock/mockServer.js'步驟3步驟4步驟1步驟27.1.4Axios圖書列表案例使用mockjs模擬后端接口請求數(shù)據(jù)：后端接口和模擬數(shù)據(jù)準(zhǔn)備好之后，就可以請求接口、獲取數(shù)據(jù)了。下面講解如何在頁面中請求接口并獲取數(shù)據(jù)。7.1.4Axios圖書列表案例步驟1清空src\App.vue文件中的內(nèi)容。步驟3步驟4步驟2步驟5在頁面中請求接口并獲取數(shù)據(jù)7.1.4Axios圖書列表案例<template>

<divclass="box">

<button>請求數(shù)據(jù)</button>

<tablewidth="90%"class="table">

<caption>

<h2>圖書列表</h2>

</caption>

<thead>

<tr>

<th>編號(hào)</th>

<th>書名</th>步驟1>>接上頁代碼步驟3步驟4步驟2步驟5在頁面中請求接口并獲取數(shù)據(jù)7.1.4Axios圖書列表案例

<th>作者</th>

</tr>

</thead>

<tbody>

<!--主體內(nèi)容-->

</tbody>

</table>

</div></template>在src\App.vue文件中編寫樣式代碼。<style>body,html{

width:100%;

height:100%;}#app{

width:100%!important;}table{

border-collapse:collapse;

margin:0auto;

text-align:center;步驟3步驟4步驟5步驟1步驟27.1.4Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)

}tabletd,tableth{

border:1pxsolid#cad9ea;

color:#666;

height:30px;}tabletheadth{

background-color:#CCE8EB;

width:100px;}步驟3步驟4步驟5步驟1步驟27.1.4Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)>>接上頁代碼tabletr:nth-child(odd){

background:#fff;}tabletr:nth-child(even){

background:#F5FAFA;}</style>步驟3步驟4步驟5步驟1步驟27.1.4Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)>>接上頁代碼為“請求數(shù)據(jù)”按鈕綁定單擊事件處理方法。<button@click="getData">請求數(shù)據(jù)</button>步驟3步驟4步驟5步驟1步驟27.1.4Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)在src\App.vue文件中請求接口數(shù)據(jù)。<scriptsetup>import{reactive}from'vue'importrequestfrom'./axios/request.js'constbookData=reactive({

list:[]})//測試請求方法步驟3步驟4步驟5步驟1步驟27.1.4Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)constgetData=function(){

request({

url:'/mock/getBooks',

method:'get'

}).then(res=>{

bookData.list=res.data.data

console.log(res.data.data)

}).catch(error=>{console.log(error)})}</script>步驟3步驟4步驟5步驟1步驟27.1.4Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)>>接上頁代碼在src\App.vue文件中編寫主體內(nèi)容。<tbodyv-for="iteminbookData.list":key="item.id"><!--主體內(nèi)容--><tr><td>{{item.id}}</td><td>{{}}</td><td>{{item.author}}</td></tr></tbody>步驟3步驟4步驟5步驟1步驟27.1.4Axios圖書列表案例在頁面中請求接口并獲取數(shù)據(jù)Vuex7.2

先定一個(gè)小目標(biāo)！了解Vuex的基本概念，能夠說出Vuex的工作原理7.2.1Vuex概述什么是Vuex？7.2.1Vuex概述Vuex是一個(gè)專為Vue開發(fā)的狀態(tài)管理庫，它采用集中式存儲(chǔ)的方式管理應(yīng)用的所有組件的狀態(tài)，解決了多組件數(shù)據(jù)通信的問題，使數(shù)據(jù)操作更加簡潔。7.2.1Vuex概述如何理解Vue中的單向數(shù)據(jù)流機(jī)制？在Vue中，組件的狀態(tài)變化是通過單向數(shù)據(jù)流的設(shè)計(jì)理念實(shí)現(xiàn)的，單向數(shù)據(jù)流是指只能從一個(gè)方向修改狀態(tài)，主要包含以下3個(gè)部分。狀態(tài)（State）：驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源。視圖（View）：以聲明方式將狀態(tài)映射到視圖。操作（Actions）：響應(yīng)在視圖上的用戶輸入導(dǎo)致的狀態(tài)變化。7.2.1Vuex概述Vuex的工作流程如下圖所示。7.2.1Vuex概述

先定一個(gè)小目標(biāo)！掌握Vuex的安裝方法，能夠在項(xiàng)目中安裝Vuex7.2.2安裝Vuex通過標(biāo)簽引入使用Unpkg的CDN服務(wù)提供的Vuex文件，也可以將Vuex文件下載至本地再引入。使用包管理工具安裝使用npm或yarn包管理工具安裝Vuex。Vuex的安裝方式主要有兩種，一種是通過標(biāo)簽引入，另一種是使用包管理工具安裝。

7.2.2安裝Vuex使用Unpkg的CDN服務(wù)引入Vuex。1.通過標(biāo)簽引入<scriptsrc="/vuex@next"></script>讀者也可以從Vuex官方網(wǎng)站直接下載Vuex，下載后再將文件引入網(wǎng)頁。注意7.2.2安裝Vuex使用npm或yarn包管理工具安裝Vuex。2.使用包管理工具安裝#使用npm包管理工具安裝npminstallvuex--save#使用yarn包管理工具安裝yarnaddvuex--save7.2.2安裝Vuex在Vue3項(xiàng)目中使用yarn安裝Vuex打開命令提示符，切換到D:\vue\chapter07目錄，使用yarn創(chuàng)建一個(gè)名稱為my-vuex的項(xiàng)目。yarncreatevitemy-vuex--templatevue項(xiàng)目名稱步驟1步驟3步驟27.2.2安裝Vuex在Vue3項(xiàng)目中使用yarn安裝Vuex步驟1步驟3步驟27.2.2安裝Vuex在命令提示符中，切換到my-vuex目錄，為項(xiàng)目安裝所有依賴。cdmy-vuexyarn在my-vuex目錄下使用yarn安裝Vuex。yarnaddvuex@4.0.2--save@4.0.2表示安裝Vuex的版本號(hào)項(xiàng)目運(yùn)行時(shí)依賴步驟1步驟3步驟27.2.2安裝Vuex在Vue3項(xiàng)目中使用yarn安裝Vuex使用VSCode編輯器打開my-vuex目錄，執(zhí)行命令啟動(dòng)服務(wù)。yarndev項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開啟一個(gè)本地服務(wù)，地址為:5173/。步驟1步驟3步驟27.2.2安裝Vuex在Vue3項(xiàng)目中使用yarn安裝Vuex

先定一個(gè)小目標(biāo)！掌握Vuex的使用方法，能夠在項(xiàng)目中使用Vuex7.2.3使用VuexVuex安裝完成后，如何使用呢？7.2.3使用Vuex在項(xiàng)目中使用Vuex時(shí)，通常的做法是先在項(xiàng)目中創(chuàng)建一個(gè)store模塊，然后導(dǎo)入并掛載store模塊。store模塊是用于管理狀態(tài)數(shù)據(jù)的倉庫。7.2.3使用Vuex①編寫store模塊，創(chuàng)建src\store\index.js文件。import{createStore}from'vuex'conststore=createStore({state:{},mutations:{},actions:{},getters:{},modules:{}})exportdefaultstore7.2.3使用Vuex管理數(shù)據(jù)更新數(shù)據(jù)定義事件處理方法再次編譯，得到新的數(shù)據(jù)定義模塊對象import{createApp}from'vue'import'./style.css'importstorefrom'./store' //導(dǎo)入store模塊importAppfrom'./App.vue'constapp=createApp(App)app.use(store) //掛載store模塊app.mount('#app')②在src\main.js文件中導(dǎo)入并掛載store模塊。7.2.3使用Vuex

先定一個(gè)小目標(biāo)！掌握Vuex計(jì)數(shù)器案例的實(shí)現(xiàn)，能夠運(yùn)用Vuex完成計(jì)數(shù)器效果7.2.4Vuex計(jì)數(shù)器案例要求使用Vuex實(shí)現(xiàn)計(jì)數(shù)器案例：計(jì)數(shù)器初始頁面中定義2個(gè)初始數(shù)字0和100，定義“+”和“-”2個(gè)按鈕。每次單擊“+”按鈕，數(shù)字從0自增1；每次單擊“-”按鈕，數(shù)字會(huì)從100自減1。7.2.4Vuex計(jì)數(shù)器案例計(jì)數(shù)器初始頁面效果如下圖所示。7.2.4Vuex計(jì)數(shù)器案例在計(jì)數(shù)器初始頁面中單擊“+”按鈕，數(shù)字從0變?yōu)?，效果如下圖所示。7.2.4Vuex計(jì)數(shù)器案例7.2.4Vuex計(jì)數(shù)器案例在計(jì)數(shù)器初始頁面中單擊“-”按鈕，數(shù)字從100變?yōu)?9，效果如下圖所示。步驟1清空src\App.vue文件中的內(nèi)容，重新編寫如下代碼。步驟3步驟4步驟2講解計(jì)數(shù)器案例的實(shí)現(xiàn)7.2.4Vuex計(jì)數(shù)器案例<template><p>

每次增加1：<button@click="increment">+</button>

數(shù)字：0</p><p>

每次減少1：<button@click="reduction">-</button>

數(shù)字：100</p></template>步驟1>>接上頁代碼步驟3步驟4步驟2講解計(jì)數(shù)器案例的實(shí)現(xiàn)7.2.4Vuex計(jì)數(shù)器案例<scriptsetup>constincrement=()=>{}constreduction=()=>{}</script><style>button{background-color:aquamarine;}</style>創(chuàng)建src\store\index.js文件。import{createStore}from'vuex'conststore=createStore({state:{add:0,reduce:100},mutations:{increase(state){state.add++},步驟3步驟4步驟1步驟27.2.4Vuex計(jì)數(shù)器案例講解計(jì)數(shù)器案例的實(shí)現(xiàn)>>接上頁代碼decrease(state){state.reduce--}},actions:{},modules:{}})exportdefaultstore步驟3步驟4步驟1步驟27.2.4Vuex計(jì)數(shù)器案例講解計(jì)數(shù)器案例的實(shí)現(xiàn)修改src\App.vue文件，提交increase()方法和decrease()方法。<scriptsetup>import{useStore}from'vuex'conststore=useStore()constincrement=()=>{mit('increase')}constreduction=()=>{mit('decrease')}</script>步驟3步驟4步驟1步驟27.2.4Vuex計(jì)數(shù)器案例講解計(jì)數(shù)器案例的實(shí)現(xiàn)在<template>模板中獲取state中的數(shù)據(jù)并顯示在頁面中。<p>

每次增加1：<button@click="increment">+</button>

數(shù)字：{{this.$store.state.add}}</p><p>

每次減少1：<button@click="decrement">-</button>

數(shù)字：{{this.$store.state.reduce}}</p>步驟3步驟4步驟1步驟27.2.4Vuex計(jì)數(shù)器案例講解計(jì)數(shù)器案例的實(shí)現(xiàn)Pinia7.3

先定一個(gè)小目標(biāo)！了解Pinia的基本概念，能夠說出Pinia的功能和優(yōu)點(diǎn)7.3.1Pinia概述什么是Pinia？7.3.1Pinia概述Pinia是新一代的輕量級狀態(tài)管理庫，它允許跨組件或頁面共享狀態(tài)，解決了多組件間的數(shù)據(jù)通信，使數(shù)據(jù)操作更加簡潔。7.3.1Pinia概述Pinia與Vuex相比，主要優(yōu)點(diǎn)如下。Pinia支持Vue2和Vue3，支持選項(xiàng)式API和組合式API寫法。Pinia簡化了狀態(tài)管理庫的使用方法，拋棄了mutations，只有state、getters和actions，讓代碼編寫更容易也更直觀。Pinia不需要嵌套模板，符合Vue3中的組合式API，讓代碼更加扁平化。Pinia提供了完整的TypeScript支持。Pinia分模塊不需要借助modules，使代碼更加簡潔，可以實(shí)現(xiàn)良好的代碼自動(dòng)分隔。Pinia支持Devtools調(diào)試工具，便于進(jìn)行調(diào)試。Pinia體積更小，性能更好。Pinia支持在某個(gè)組件中直接修改Pinia的state中的數(shù)據(jù)。Pinia支持服務(wù)端器渲染。7.3.1Pinia概述

先定一個(gè)小目標(biāo)！掌握Pinia的安裝方法，能夠在項(xiàng)目中安裝Pinia7.3.2安裝Pinia使用npm或yarn包管理工具安裝Pinia。#使用yarn包管理器安裝yarnaddpinia--save#使用npm包管理器安裝npminstallpinia--save7.3.2安裝Pinia在Vue3項(xiàng)目中使用yarn安裝Pinia打開命令提示符，切換到D:\vue\chapter07目錄，使用yarn創(chuàng)建一個(gè)名稱為my-pinia的項(xiàng)目。yarncreatevitemy-pinia

--templatevue項(xiàng)目名稱步驟1步驟3步驟27.3.2安裝Pinia在Vue3項(xiàng)目中使用yarn安裝Pinia步驟1步驟3步驟27.3.2安裝Pinia在命令提示符中，切換到my-pinia目錄，為項(xiàng)目安裝所有依賴。cdmy-piniayarn在my-pinia目錄下使用yarn安裝Pinia。yarnaddpinia@2.0.27--save@2.0.27表示安裝Pinia的版本號(hào)項(xiàng)目運(yùn)行時(shí)依賴步驟1步驟3步驟27.3.2安裝Pinia在Vue3項(xiàng)目中使用yarn安裝Pinia使用VSCode編輯器打開my-pinia目錄，執(zhí)行命令啟動(dòng)服務(wù)。yarndev項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開啟一個(gè)本地服務(wù)，地址為:5173/。步驟1步驟3步驟27.3.2安裝Pinia在Vue3項(xiàng)目中使用yarn安裝Pinia

先定一個(gè)小目標(biāo)！掌握Pinia的使用方法，能夠在項(xiàng)目中使用Pinia7.3.3使用PiniaPinia安裝完成后，如何使用呢？7.3.3使用Pinia在項(xiàng)目中使用Pinia時(shí)，通常先在項(xiàng)目中創(chuàng)建一個(gè)store模塊，然后創(chuàng)建并掛載Pinia實(shí)例。其中，store模塊是用于管理狀態(tài)數(shù)據(jù)的倉庫。7.3.3使用Pinia①編寫store模塊，創(chuàng)建src\store\index.js文件。import{defineStore}from'pinia'exportconstuseStore=defineStore('storeId',{state:()=>{},getters:{},actions:{}})導(dǎo)入defineStore()函數(shù)狀態(tài)管理容器的名稱定義事件處理方法再次編譯，得到新的數(shù)據(jù)管理數(shù)據(jù)7.3.3使用Piniaimport{createApp}from'vue'import'./style.css'import{createPinia}from'pinia'importAppfrom'./App.vue'constapp=createApp(App)constpinia=createPinia() //創(chuàng)建Pinia實(shí)例app.use(pinia) //導(dǎo)入Pinia實(shí)例app.mount('#app')②在src\main.js文件中創(chuàng)建并掛載Pinia實(shí)例。7.3.3使用Pinia

先定一個(gè)小目標(biāo)！掌握Pinia計(jì)數(shù)器案例的實(shí)現(xiàn)，能夠運(yùn)用Pinia完成計(jì)數(shù)器效果7.3.4Pinia計(jì)數(shù)器案例要求使用Pinia實(shí)現(xiàn)計(jì)數(shù)器案例：計(jì)數(shù)器初始頁面定義了2個(gè)初始數(shù)字0和100，定義了“+”和“-”2個(gè)按鈕。每次單擊“+”按鈕，數(shù)字從0自增1；每次單擊“-”按鈕，數(shù)字會(huì)從100自減1。7.3.4Pinia計(jì)數(shù)器案例計(jì)數(shù)器初始頁面效果如下圖所示。7.3.4Pinia計(jì)數(shù)器案例在計(jì)數(shù)器初始頁面中單擊“+”按鈕，其后數(shù)字從0變?yōu)?，效果如下圖所示。7.3.4Pinia計(jì)數(shù)器案例在計(jì)數(shù)器初始頁面中單擊“-”按鈕，其后數(shù)字從100變?yōu)?9，效果如下圖所示。7.3.4Pinia計(jì)數(shù)器案例步驟1清空src\App.vue文件中的內(nèi)容，重新編寫如下代碼。步驟3步驟4步驟2講解計(jì)數(shù)器案例的實(shí)現(xiàn)<template><p>

每次增加1：<button@click="increment">+</button>

數(shù)字：0</p><p>

每次減少1：<button@click="reduction">-</button>

數(shù)字：100</p></template>7.3.4Pinia計(jì)數(shù)器案例步驟1>>接上頁代碼步驟3步驟4步驟2講解計(jì)數(shù)器案例的實(shí)現(xiàn)<scriptsetup>constincrement=()=>{}constreduction=()=>{}</script><style>button{background-color:aquamarine;}</style>7.3.4Pinia計(jì)數(shù)器案例創(chuàng)建src\store\index.js文件。import{defineStore}from'pinia'exportconstuseStore=defineStore('storeId',{state:()=>{return{add:0,reduce:100}},步驟3步驟4步驟1步驟2講解計(jì)數(shù)器案例的實(shí)現(xiàn)7.3.4Pinia計(jì)數(shù)器案例>>接上頁代碼getters:{},actions:{increase(){this.add++},decrease(){this.reduce--}}})步驟3步驟4步驟1步驟2講解計(jì)數(shù)器案例的實(shí)現(xiàn)7.3.4Pinia計(jì)數(shù)器案例修改src\App.vue文件，調(diào)用actions中定義的increase()方法和decrease()方法。<scriptsetup>import{useStore}from'./store'import{storeToRefs}from'pinia'conststore=useStore()const{add,reduce}=storeToRefs(store)constincrement=()=>{store.increase()}constreduction=()=>{store.decrease()}</script>步驟3步驟4步驟1步驟2講解計(jì)數(shù)器案例的實(shí)現(xiàn)7.3.4Pinia計(jì)數(shù)器案例在<template>模板中輸出state中的數(shù)據(jù)，顯示在頁面中。<p>

每次增加1：<button@click="increment">+</button>

數(shù)字：{{add}}</p><p>

每次減少1：<button@click="reduction">-</button>

數(shù)字：{{reduce}}</p>步驟3步驟4步驟1步驟2講解計(jì)數(shù)器案例的實(shí)現(xiàn)7.3.4Pinia計(jì)數(shù)器案例

先定一個(gè)小目標(biāo)！熟悉Pinia模塊化，能夠闡述Pinia模塊化的實(shí)現(xiàn)原理7.3.5Pinia模塊化Pinia模塊化應(yīng)用場景？7.3.5Pinia模塊化7.3.5Pinia模塊化在復(fù)雜的大型項(xiàng)目中，如果將多個(gè)模塊的數(shù)據(jù)都定義到一個(gè)store對象中，那么store對象將變得非常大且難以管理，此時(shí)，可以使用Pinia直接定義多個(gè)模塊，Pinia不需要像Vuex一樣使用modules模塊，它可以在src\store目錄中直接定義對應(yīng)模塊，一個(gè).js文件為一個(gè)模塊。在src\store目錄下，新建user.js和shop.js文件作為兩個(gè)模塊，其中，user.js文件用于保存用戶信息數(shù)據(jù)，shop.js文件用于保存商品信息數(shù)據(jù)。7.3.5Pinia模塊化步驟1創(chuàng)建src\store\user.js文件，編寫用戶信息數(shù)據(jù)。步驟3步驟4步驟2講解user.js和shop.js模塊的創(chuàng)建import{defineStore}from'pinia'exportconstuseUserStore=defineStore('user',{state:()=>{return{name:'小明',sex:'男',age:18}},getters:{},actions:{}})7.3.5Pinia模塊化步驟5步驟6創(chuàng)建src\store\shop.js文件，編寫商品信息數(shù)據(jù)。import{defineStore}from'pinia'exportconstuseShopStore=defineStore('shop',{state:()=>{return{list:[{id:'01',name:'手機(jī)',price:2000},步驟3步驟4步驟1步驟27.3.5Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建步驟5步驟6

{id:'02',name:'音響',price:5000}]}},getters:{},actions:{}})步驟3步驟4步驟1步驟27.3.5Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建>>接上頁代碼步驟5步驟6>>接上頁代碼getters:{},actions:{increase(){this.add++},decrease(){this.reduce--}}})步驟3步驟4步驟1步驟27.3.5Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建步驟5步驟6創(chuàng)建src\components\User.vue文件，在頁面中顯示用戶信息數(shù)據(jù)。<template><div>user模塊：

<p>姓名：{{name}}</p><p>性別：{{sex}}</p><p>年齡：{{age}}</p></div></template><scriptsetup>import{useUserStore}from'../store/user.js'import{storeToRefs}from'pinia'constuser=useUserStore()const{name,sex,age}=storeToRefs(user)</script>步驟3步驟4步驟1步驟27.3.5Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建步驟5步驟6修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/User.vue'步驟3步驟4步驟1步驟27.3.5Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建保存上述代碼，在瀏覽器中訪問:5173/，user模塊的頁面效果如下圖所示。步驟5步驟6創(chuàng)建src\components\Shop.vue文件，在頁面中顯示商品信息數(shù)據(jù)。<template>shop模塊：

<divv-for="iteminlist"><p>商品id：{{item.id}}</p><p>商品名稱：{{}}</p><p>商品價(jià)格：{{item.price}}元</p></div></template>步驟3步驟4步驟1步驟27.3.5Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建步驟5步驟6>>接上頁代碼<scriptsetup>import{useShopStore}from'../store/shop.js'import{storeToRefs}from'pinia'constshop=useShopStore()const{list}=storeToRefs(shop)</script>步驟3步驟4步驟1步驟27.3.5Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建步驟5步驟6修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Shop.vue'步驟3步驟4步驟1步驟27.3.5Pinia模塊化講解user.js和shop.js模塊的創(chuàng)建保存上述代碼，在瀏覽器中訪問:5173/，shop模塊的頁面效果如下圖所示。步驟5步驟6

先定一個(gè)小目標(biāo)！掌握Pinia持久化存儲(chǔ)，能夠運(yùn)用Pinia實(shí)現(xiàn)全部數(shù)據(jù)或部分?jǐn)?shù)據(jù)的持久化存儲(chǔ)7.3.6Pinia持久化存儲(chǔ)在項(xiàng)目開發(fā)中，使用Pinia進(jìn)行狀態(tài)管理時(shí)，若想要刷新瀏覽器后，仍保留之前的操作狀態(tài)，可以通過Pinia的持久化插件pinia-plugin-persist實(shí)現(xiàn)。7.3.6Pinia持久化存儲(chǔ)7.3.6Pinia持久化存儲(chǔ)使用npm或yarn包管理工具安裝pinia-plugin-persist。#使用npm包管理工具安裝npminstallpinia-plugin-persist--save#使用yarn包管理工具安裝yarnaddpinia-plugin-persist--save在my-pinia項(xiàng)目中安裝pinia-plugin-persist步驟1步驟3步驟27.3.6Pinia持久化存儲(chǔ)在my-pinia目錄下使用yarn安裝pinia-plugin-persist插件。yarnaddpinia-plugin-persist@1.0.0--save@1.0.0表示安裝pinia-plugin-persist的版本號(hào)項(xiàng)目運(yùn)行時(shí)依賴步驟1步驟3步驟27.3.6Pinia持久化存儲(chǔ)在my-pinia項(xiàng)目中安裝pinia-plugin-persist使用VSCode編輯器打開my-pinia目錄，執(zhí)行命令啟動(dòng)服務(wù)。yarndev在src\main.js文件中導(dǎo)入并掛載pinia-plugin-persist插件。import{createApp}from'vue'import'./style.css'import{createPinia}from'pinia'importpiniaPluginPersistfrom'pinia-plugin-persist'importAppfrom'./components/Shop.vue'constpinia=createPinia()pinia.use(piniaPluginPersist)constapp=createApp(App)app.use(pinia)app.mount('#app')步驟1步驟3步驟27.3.6Pinia持久化存儲(chǔ)在my-pinia項(xiàng)目中安裝pinia-plugin-persist掛載pinia-plugin-persist插件后，在模塊中實(shí)現(xiàn)持久化存儲(chǔ)的示例代碼如下。步驟1步驟3步驟27.3.6Pinia持久化存儲(chǔ)在my-pinia項(xiàng)目中安裝pinia-plugin-persistpersist:{enabled:true, //開啟數(shù)據(jù)緩存strategies:[{key:'StoreId1', //當(dāng)前store的idstorage:localStorage, //存儲(chǔ)方式paths:['字段'] //指定要持久化的字段

}]}下面以my-pinia項(xiàng)目為例，演示如何使用Pinia實(shí)現(xiàn)全部數(shù)據(jù)持久化存儲(chǔ)。當(dāng)用戶單擊“增加年齡”按鈕時(shí)，年齡值將會(huì)改變，此時(shí)關(guān)閉瀏覽器或刷新頁面后，要求頁面顯示最新修改的年齡值。7.3.6Pinia持久化存儲(chǔ)1.全部數(shù)據(jù)持久化存儲(chǔ)步驟1在src\components\User.vue文件中定義“增加年齡”按鈕。步驟3步驟4步驟2使用Pinia實(shí)現(xiàn)全部數(shù)據(jù)持久化存儲(chǔ)<template><div>user模塊：

<p>姓名：{{name}}</p><p>性別：{{sex}}</p><p>年齡：{{age}}</p><button@click="changeAge">增加年齡</button></div></template>7.3.6Pinia持久化存儲(chǔ)修改src\store\user.js文件，在actions中定義一個(gè)改變年齡的方法，并實(shí)現(xiàn)持久化存儲(chǔ)。actions:{changeAge(){this.age++},},persist:{enabled:true,strategies:[步驟3步驟4步驟