vue中的狀態管理應用

2021-10-04 07:36:06 字數 2582 閱讀 8059

vue.js官網中生態系統中給我們提供乙個官方的外掛程式vuex,利用這個外掛程式我們可以集中式管理資料,一處修改,多處應用,多個元件依賴同一狀態。主要應用於開發中大型專案。

首先:npm i vuex -s

引入外掛程式import vuex from 'vuex'

vuex是個物件,相關成員如下

成員用途

store

類,構造狀態管理的例項

mapactions

函式,通訊工具

mapmutations

函式,通訊工具

mapgetters

函式,通訊工具

mapstate

函式,通訊工具

狀態管理 store例項相關成員

成員用途

dispatch

例項方法,通訊工具

commit

例項方法,通訊工具

state

屬性,獲取公共資料

互動流程

components->

actions->

mutations->

state

->components

傳送請求

處理業務,非同步

修改狀態

狀態讀取處理狀態

渲染狀態

dispatch

commit

state.key=value

state.key

}mapactions->

mapmutations->

------------------->

commit->

------------------->

基礎應用:

1、新建乙個js檔案 :// src/plugins/vuex.js

//配置 store

import vue from 'vue';

import vuex from 'vuex';//引入vuex包

vue.use(vuex);//安裝外掛程式到vue

import state from '../store/state.js'

import actions from '../store/actions.js'

import mutations from '../store/mutations.js'

import getters from '../store/getters.js'

let store = new vuex.store();

export default store;//匯出store例項給main.js

2、在main.js引入store例項

import store from './plugins/vuex.js'

new vue(

export default state;

let actions = ,payload)=>

};export default actions;

let mutations=

};export default mutations;

let getters = 

};export default getters;

在元件中的應用

}}

import  from 'vuex'

import store from '../plugins/vuex.js';

export default )}},

//mapactions 用來接管methods,返回乙個物件

// methods:mapactions([

// 'add'

//])

//mapmutations 接管methods,跳過actions找mutations

//methods:mapmutations([

// 'increment'

// ])

// methods:

// },

//mapgetters接管computed,返回乙個物件

狀態管理主要是把握store裡面的幾個成員的互動流程!!!

注意一點在元件中的應用是否要加payload引數,依據methods中使用的那種請求方式(程式設計式傳送請求,傳payload引數;如果是mapmutations、mapactions接管methods,在呼叫處傳參)

溝通管理應用

有效的溝通是資訊專案建設成敗的關鍵,專案經理應該將75 以上的精力時間用於溝通。專案建設不知道該與那些人溝通,溝通什麼內容 溝通物件不明,就不知道如何開展專案工作 在需求調研時不知道向誰了解問題,需求確認時不知道向誰確認設計,變更簽字時不知道向誰提交申請等 溝通標準不確立,專案建設的階段成果將無法得...

vue中的狀態管理 vuex store

vuex store 是響應式的,當vue元件從store中讀取狀態 state 時,若store中的狀態發生更新時,會及時的響應給其他的元件。store 中的四個核心選項 state mutation getters actions 1 state是用來存放元件之間共享的資料,一般會在元件的計算屬...

swarm管理應用資料

將宿主機資料掛載到容器 volume 建立容器和資料卷 docker service create mount type volume src nginx vol dst usr share nginx html replicas1 name test01 nginx檢視test01容器部署在那台機...