Vuex · 常用筆記

# Vuex **單向數據流概念** ![](https://img.kancloud.cn/1c/91/1c917df0fef94ec8c42acd5a00b53bb4_507x343.png) ``` <pre class="calibre13">``` 多個視圖依賴于同一狀態（例如：菜單導航）來自不同視圖的行為需要變更同一狀態（例如：評論彈幕） ``` ``` **Vuex介紹：** - 為vue.js開發的狀態管理模式 - 組件狀態集中管理 - 組件狀態改變遵循統一的規則 store.js文件中 state代表狀態 mutations 代表我們改變狀態值得方法 ## 二、VueX中的核心內容在VueX對象中，其實不止有`state`,還有用來操作`state`中數據的方法集，以及當我們需要對`state`中的數據需要加工的方法集等等成員。成員列表： - state 存放狀態 - mutations state成員操作 - getters 加工state成員給外界 - actions 異步操作 - modules 模塊化狀態管理 ![](https://img.kancloud.cn/f1/31/f131cb0b40158447b49cd189caf2de6e_728x587.png) > 首先，`Vue`組件如果調用某個`VueX`的方法過程中需要向后端請求時或者說出現異步操作時，需要`dispatch` VueX中`actions`的方法，以保證數據的同步。可以說，`action`的存在就是為了讓`mutations`中的方法能在異步操作中起作用。如果沒有異步操作，那么我們就可以直接在組件內提交狀態中的`Mutations`中自己編寫的方法來達成對`state`成員的操作。注意，`1.3.3節`中有提到，不建議在組件中直接對`state`中的成員進行操作，這是因為直接修改(例如：`this.$store.state.name = 'hello'`)的話不能被`VueDevtools`所監控到。最后被修改后的state成員會被渲染到組件的原位置當中去。 ### 2.2 Mutations `mutations`是操作`state`數據的方法的集合，比如對該數據的修改、增加、刪除等等。 #### 2.2.1 Mutations使用方法 `mutations`方法都有默認的形參： (**\[state\]****\[,payload\]**) - `state`是當前`VueX`對象中的`state` - `payload`是該方法在被調用時傳遞參數使用的 ### uniapp 使用實例 ``` <pre class="calibre14">``` // vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // Vuex核心 const store = new Vuex.Store({ state:{ //存放狀態 imglistData:[], logImgData:[],// 圖片視頻完整鏈接數組 logShortImgData:[], //圖片視頻本地鏈接數組 imgInfos:{} }, getters:{ //store計算屬性 }, mutations:{ // 改變數據的方法集合 updateImgList(state,value){ state.imglistData.push(value) }, //日志詳情 getimgInfos(state,value){ state.imgInfos = value; }, //得到日志詳情圖片列表 updateLogImg(state,value){ state.logImgData = value }, //編輯列表 editlogImgList(state,value){ state.logShortImgData = value }, // 更新編輯列表 upeditlogImgList(state,value){ state.logShortImgData.push(value) }, clearList(state){ state.imglistData = [] state.logImgData = [] state.logShortImgData=[] state.imgInfos={} } }, actions:{ //類似 mutation }, modules:{ //以對象形式分發 } }) export default store ``` ```