国产女人被狂躁到高潮小说,亚洲日韩一区二区三区,色窝窝无码一区二区三区成人网站 ,丰满岳乱妇在线观看中字无码

400-800-9385
網站建設資訊詳細

網站前端開發之vue中的vuex介紹

發表日期:2023-03-04 16:36:08   作者來源:river   瀏覽:1708   標簽:網站前端開發    
網站前端開發技術vue一騎絕塵,成為前端開發的首選語言,比傳統前端、react更加受人喜歡,對于開發系統級別的應用是非常適合使用vue的,開發企業站等邏輯簡單的網站,考慮到SEO和維護成本,可能還是使用傳統的前端適合。今天方維網絡給大家介紹vue中非常重要的vuex.

什么是vuex呢?

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化。

大家都知道vue是前后端分離的,我們傳統開發中,可以使用后端的session來存儲token、用戶名等信息,那么如果前后端分離了,就不能使用后端的session了,那么怎么辦呢?解決辦法就是vuex,相當于后端的更高級版的session.

vuex狀態管理以下部分:

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

他們的關系如下圖
 

vuex關系


vuex存在的必要性

vue的data保存的state只能當前頁面有效,子組件或者其他頁面則無效,如果有一些狀態如token、登錄信息、權限等需要全局同步的狀態則實現不了,那么這時候就需要使用vuex.


vuex怎么安裝呢?

很簡單,使用命令

npm install vuex --save 
或者
yarn add vuex

程序代碼中引入方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)


使用簡單示例


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment (state) { state.count++ } }
})

現在,你可以通過 store.state 來獲取狀態對象,以及通過 store.commit 方法觸發狀態變更:
store.commit('increment')

使用起來還是可以靈活多變,具體大家可以慢慢研究。
 

如沒特殊注明,文章均為方維網絡原創,轉載請注明來自http://www.sdlwjx666.com/news/6707.html