1. 程式人生 > 實用技巧 >前端系列課程之Vuex

前端系列課程之Vuex

Vuex

  1. 為什麼使用Vuex

在這裡插入圖片描述

例子:(使用Vue方法:)

在這裡插入圖片描述
新建(一):

在這裡插入圖片描述

新建(二):

在這裡插入圖片描述

將新建的兩個檔案匯入 About中,做子元件:

在這裡插入圖片描述

事件匯流排:(全域性定義)

在這裡插入圖片描述
在新建(一)新增:

在這裡插入圖片描述

在新建(二)中新增:

在這裡插入圖片描述
(上面適用於小專案開發)

  1. Vuex原理:

在這裡插入圖片描述

一、安裝 vuex

在這裡插入圖片描述
二、建立倉庫檔案

1.建立資料夾
在這裡插入圖片描述

2. 在資料夾中建立檔案:

在這裡插入圖片描述
3.在新建檔案中匯入:

在這裡插入圖片描述
4.匯入到main.js

在這裡插入圖片描述

  • Vuex原理
    > store中通過state管理資料,實現資料在元件之間共享
    > Vuex和本地儲存的區別
    > Vuex臨時儲存在記憶體中,本地儲存可以持久儲存
    > Vuex針對元件間共享資料,本地儲存針對多頁面間共享資料
    > Vuex儲存資料型別不限,本地儲存只能儲存字串

新建兩個檔案

內容複製上面建立的內容即可
在這裡插入圖片描述

在About.vue中匯入
在這裡插入圖片描述
(上圖未截全,script中配置類似如下:)
在這裡插入圖片描述