逆戰一之Vuex的介紹以及一些基本用法

2021-10-03 08:34:00 字數 1155 閱讀 2879

1.介紹:vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。

2.理解: vuex相當於乙個倉庫,每乙個 vuex 應用的核心就是 store(倉庫),集中儲存和管理應用的所有元件的狀態.

vue元件接收互動行為,呼叫dispatch方法觸發action相關處理,若頁面狀態需要改變,則呼叫commit方法提交mutation修改state,通過getters獲取到state新值,重新渲染vue components,介面隨之更新

1.中大型單頁面開發應用

2.解決非父子之間的通訊問題,

3.提高使用者體驗,利用vuex快取後台資料-----缺點:重新整理頁面,資料會丟失,可以使用』'vue-persistedstate"外掛程式解決

//引入外掛程式

import createpersistedstate from

"vuex-persistedstate"

;// 例項化

const store =

newvuex.store(}})]

//引入vue vuex

import vue from

'vue'

import vuex from

'vuex'

//註冊vuex

vue.

use(vuex)

//例項化 store

export

default

newvuex.store(,

mutations:},

actions:})

.then

(res =>);

}}, getters:},

})

注意:

vuex只能有乙個store,

為了防止多人修改,我們切割成子store, 再合併成唯一乙個大的store物件

資料我們可通過輔助函式的方式獲取

import

from

"vuex"

export

default

}

Vuex的一些隨筆

vuex 和單純的全域性物件有以下兩點不同 vuex 的狀態儲存是響應式的。當 vue 元件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那麼相應的元件也會相應地得到高效更新。你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 commit...

關於Vuex的一些總結

store有state mutations actions getters state 用於儲存狀態。訪問方式 this.store.state.或 computed mutations 改變store狀態的唯一方法,但是必須是同步,不能非同步。訪問方式 this.store.commit 引數 但...

css一些介紹

網上找資料的話還是要綜合來找,找好資料可以節約很大很大程度的麻煩 或參考 第一部分 css血統論 1 什麼是html血統。html血統是指的html標記 標籤 預設的語義和外觀樣式。充分理解這一點,是我們設計 優化 seo 的基礎。理解html血統,一定要把握以下三個方面。2 標記 標籤 的基本語義...