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 ``` ```