【SRH】

SRH】"/>

【SRH】

一.vuex的理解 Vuex是一种状态管理模式，它采用 集中式存储管理应用的所有组件的状态。 把组件的共享状态抽取出来，以一个 全局单例模式管理，在这种模式下，任何组件都能获取状态或者触发行为，使代码更结构化，且易维护 使用场景：中大型单页面开发 二.创建仓库 每个Vuex的应用核心就是store(仓库)，包含着应用中大部分的状态（属性） 1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation     3.创建store仓库  引入vue import Vue from "vue";    引入vuex import Vuex from "vuex";  将vuex挂载在vue身上 Vue.use(Vuex);      //通过Vuex创建仓库,共有5个对象 const store= new Vuex.Store({ state, mutations, actions， getters, module:{ } })   //导出仓库 export default store 三.store的5个对象及作用 1.state:存放的是公共的状态 组件中访问公共状态的两种方式 1.如果没有使用辅助函数-------this.$store.state.属性 2.组件中使用了辅助函数mapState-------直接使用属性 （computed中使用）辅助函数----mapState 2.mutations: 用来修改state的状态(同步) 该对象下面所有的函数里面都会有2个参数 一个是state 另一是params 该方法触发的时候必须通过commit进行触发 （methods中使用）辅助函数-----mapMutations 3.actions:用来进行异步的请求(axios)和业务逻辑的操作 该对象下面所有的函数里面都会有2个参数 参数1：是一个对象 对象里面有commit和state 参数2：需要传递的参数 调用actions里面的方法用两种方式 1.未使用辅助函数--------通过dispatch--this.$store.dispatch("函数"，参数) 2.使用辅助函数mapActions--------直接使用函数 （methods中使用）辅助函数--------mapActions 4.getters:当state里面的状态发生改变的时候getters里面的方法就会执行 getters其实就是一个计算属性 在getters里面的每一个函数中都可以访问到state （computed中使用）辅助函数------mapGetters 5.modules:将模块进行分类 modules里面存放的是一些子模块，store里面有哪些属性 子模块中也会有哪些属性 但是需要注意的一点是:   1. 在导出子模块的时候需要加一个作用域的限制 namespaced=true 2.当访问子模块里面的一些方法或者状态的时候需要加上子模块的名字 例如 方法： handleAdd:"tabStore/handleAdd"; 状态： message:state=>state.tabStore.message 辅助函数 1.mapState() computed: ...Vuex.mapState({ key:state=>state.key }) 2.mapMutations() 3.mapActions() methods: ...vuex.mapActions({ add:"handleAdd" }) 4.mapGetters() computed: ...VuexmapGetters({ key:"key" })   vuex数据传递的流程     当组件进行数据修改的时候，我们需要调用dispatch来触发actions里面的方法。(actions里面用来操作异步和业务逻辑)actions里面的每个方法中都会 有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。 mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改 （mutations 数据的操作是同步的），因为数据是双向绑定的，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

转载于:.html