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容器部署在那台機...