vuex
简介: 公共的状态管理模式 是一种最好的非父子组件传值的一种方案 是一个插件 安装: 1、cnpm install vuex -S
vueX配置文件 import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex);//使用插件 //vuex配置 公共的内存空间 const store = new Vuex.Store({ state,//存放公共的状态(数据) actions,//处理异步数据 mutations,//修改state中的数据 getters,//计算属性,当state中的数据发生改变时,会触发getters中的函数 modules//多人协作,多个子模块,子模块导出时 namespaced:true 实现模块私有化 }) export default store;
Vuex中常用的配置项:(5个) 1、state:存储公共的状态 当组件需要访问state中的数据的时候通过this.$store.state.属性进行访问 2、actions:用来处理异步数据(当Vuex中的数据是通过异步获取的时候,必须要经历actions这个配置项) actions里面的每一个函数都会有一个参数这个参数是一个对象,对象中有一个commit方法 这个方法用来触发mutations里面的方法 3、mutations:用来修改state中的数据,state里面的数据只能在mutations这个配置项中修改 mutations里面的每一个函数都会有一个参数这个参数就是state,用来修改state中的数据 4、getters:计算属性(getters与组件中的computed很类似) getters中的函数依赖于state中的属性,当state中的属性发生了改变后就会触发getters里面的方法 5、modules:多人协作的时候,防止变量和方法冲突 modules里面的属性都是一个小型Vuex。Vuex里面有的配置项目子模块中也会有 另外需要注意的是在导出子模块的时候切记加一个namespaced:true 实现Vuex模块私有化 vuex模块化私有化: 在子模块导出 export default{ } 中添加 namespaced:true 6.Vuex数据传递的流程: 当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。 actions里面的每个方法中都会有一个commit方法,当方法执行的时候会通过commit来触 mutations里面的方法进行数据的修改。 mutations里面的每个函数都会有一个state参数,这样就可以在mutations里面进行state的数 据修改,当数据修改完毕后,会传导给页面。页面的数据也会发生改变 7.Vuex中的触发函数: dispatch: 触发actions里面的方法 参数1:函数名称 参数2:需要传递的参数 commit :触发mutations里面的方法 参数1:函数名称 参数2:需要传递的参数 8. 辅助函数 1、辅助函数 mapState 1、引入mapState import {mapState} from "vuex" 2、mapState必须将数据映射到computed身上 3、语法: computed:mapState(["属性名称"]) computed:mapState({ key:state=>state.属性 }) 2、辅助函数 mapActions 1、引入mapActions import {mapActions} from "vuex" 2、mapActions必须将方法映射到methods身上 3、语法: methods:mapActions(["方法名称"]) methods:mapActions({ key:方法名称 }) 3、 辅助函数 mapMutations 1、引入mapMutations import {mapMutations} from "vuex" 2、mapMutations必须将方法映射到methods身上 3、语法: methods:mapMutations(["方法名称"]) methods:mapMutations({ key:方法名称 }) 4、 辅助函数 mapGetters 1、引入mapGetters import {mapGetters} from "vuex" 2、mapGetters必须将数据映射到computed身上 3、语法: computed:mapGetters(["方法名称"]) computed:mapGetters({ key:方法名称 }) 5.结合...展开运算符使用 computed:{ ...mapState({ n1:state=>state.a, n2:state=>state.b, n3:state=>state.c }), ...mapGetters({ count:"count" }) }, methods:{ ...mapActions({ fn:"handleActions" }), ...mapMutations({ handleAdd:"handleMutationsAdd" }) }
实战:
index.vue
<template> <div class="app"> <h2>{{n1}}</h2> <h2>{{n2}}</h2> <h2>{{n3}}</h2> <button @click="fn()">点击</button> <button @click="handleAdd()">点击++++</button> <h2>getters:{{count}}</h2> </div> </template> <script> import {mapState,mapActions,mapMutations,mapGetters} from "vuex"; export default { name: "App", computed:{ ...mapState({ n1:state=>state.a, n2:state=>state.b, n3:state=>state.c }), ...mapGetters({ count:"count" }) }, methods:{ ...mapActions({ fn:"handleActions" }), ...mapMutations({ handleAdd:"handleMutationsAdd" }) } } </script> <style> </style>
store/index.js
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); let state = { a:10, b:11, c:12 } let actions = { handleActions({commit}){ alert(1); } } let mutations = { handleMutationsAdd(state){ state.a++; } } let getters = { count(state){ return state.a+10 } } // vuex配置项 公共的内存空间 const store = new Vuex.Store({ state, actions, mutations, getters }) export default store;