vuex

文章目录

0. 什么是vuex1. 使用vuex统一管理的好处2. vuex的基本使用步骤3. vuex核心概念1. State ----State中存放的就是全局共享的数据2. Mutations ---- 用于变更Store中的数据3. Actions ---- 用于处理异步任务4. Getters---- 对Store中已有的数据进行加工处理形成新的数据，Store中数据发生变化，Getters的数据也会跟着变化。5. vuex模块化module管理 4. vuex面试题汇总

0. 什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的全局状态管理工具，用于任意组件之间进行通信。 它有以下几个核心部分组成： state:存储数据； mutations:用于变更state中的数据； actions:调用mutations方法，处理异步任务； getters:对Store中已有的数据进行加工处理形成新的数据，Store中数据发生变化，Getters的数据也会跟着变化。

Vuex官方文档

1. 使用vuex统一管理的好处

能够在vuex中集中管理共享的数据，易于开发和后期维护。能够高效的实现组件之间的数据共享，提高开发效率。存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

2. vuex的基本使用步骤

//1. 安装vuex依赖包 //npm install vuex --save //2. 在store文件夹下新建一个index.js使用vuex //2.1. 导入vuex包 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //2.2. 创建store对象 export default new Vuex.Store({ //state中存放的就是全局共享的数据 state:{ }, mutations:{ }, actions:{ } , getters:{ } }) //3. 将store对象挂载到vue实例中 import store from './store' new Vue({ render: h => h(App), router, //所有组件都可以直接从store中获取数据了 store }).$mount('#app')

3. vuex核心概念

1. State ----State中存放的就是全局共享的数据

组件访问State中的数据的方式： 第一种：this.$store.state.全局数据名称 第二种方法：mapState映射函数

//第一步，在组件中导入mapState函数 import {mapState} from 'vuex' //第二步，通过mapState函数将当前组件需要的全局数据映射为当前组件的computed计算属性 //该属性就可以直接使用了例如<div>{{myDate}}</div> computed:{ ...mapState(['myDate']); }

2. Mutations ---- 用于变更Store中的数据

(1). 只能通过mutations变更Store数据，不可以使用this.$store.state.全局数据名称= 啥啥啥的方式直接操作Store中的数据。 (2). 通过mutations变更Store数据虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。 (3). mutations里不能编写异步代码

//实例： //定义Mutation const store = new Vuex.Store({ state: {count: o}, mutations: { //变更状态函数 add(state){ state.count++ } //外界可传参的变更状态函数,第二参数表示外界传入的参数 change(state,step){ state.count+=step } } }) //************************************* //在组件中调用变更状态函数第一种方法 methods:{ handle1(){ //触发mutations中的状态变更函数 this.$store.commit('add'); }, handle2(){ //触发mutations中的状态变更函数,携带参数 this.$store.commit('change',3); } } //************************************* //在组件中调用变更状态函数第二种方法 //第一步，在组件中导入mapMutations函数 import{mapMutations} from 'vuex' //第二步：通过mapMutations函数将当前组件需要的mutations函数映射为当前组件的methods方法 methods:{ ...mapMutations(['add','change']), handle1(){ this.add(); }, handle2(){ this.change(3); } }

3. Actions ---- 用于处理异步任务

Actions 用于处理异步任务，不能直接修改State中的数据，需要调用mutations里的状态变更函数

//定义Action const store = new Vuex.Store ({ state: {count: o}, mutations: { add(state){ state.count++; }, sub(state,step){ state.count -= step; } }, actions: { addAsync(context){ setTimeout(()=> { context.commit( 'add' ); }, 1000) }, subAsync(context,step){ setTimeout(()=> { context.commit( 'sub',step ); }, 1000) } } }) //*********************************************** methods:{ handle1(){ //触发Action的第一种方式 this.$store.dispatch ('addAsync'); }, handle1(){ //触发Action的第一种方式 //带参数 this.$store.dispatch ('subAsync',step); } } //*********************************************** //触发Action的第二种方式 //第一步，在组件中导入mapActions函数 import{mapActions} from 'vuex' //第二步：通过mapActions函数将当前组件需要的actions函数映射为当前组件的methods方法 methods:{ ...mapActions(['addAsync','subAsync']), handle1(){ this.addAsync(); }, handle2(){ this.subAsync(3); } }

4. Getters---- 对Store中已有的数据进行加工处理形成新的数据，Store中数据发生变化，Getters的数据也会跟着变化。

//定义Getters conststore=new Vuex.Store({ state:{count:0}, getters:{ showNum:state=>{ return '当前最新的数量是['+state.count+']'; } } }) //********************************** //获取Getters里的新属性的第一种方法 this.$store.getters.名称 //第二种方法：mapGetters映射函数 //第一步，在组件中导入mapGetters函数 import {mapGetters} from 'vuex' //第二步，通过mapGetters函数将当前组件需要的全局数据映射为当前组件的computed计算属性 //该属性就可以直接使用了例如<div>{{showNum}}</div> computed:{ ...mapGetters(['showNum']); }

5. vuex模块化module管理

对全局数据可以进行分模块管理。

import Vue from 'vue' import Vuex from 'vuex' import app from './modules/app' import user from './modules/user' Vue.use(Vuex) const store = new Vuex.Store({ modules: { app, user } }) export default store //当前文件夹下modules/app.js const app = { state:{ }, mutations:{ }, actions:{ } , getters:{ } } export default app //当前文件夹下modules/user.js const user= { state:{ }, mutations:{ }, actions:{ } , getters:{ } } export default user

对vuex模块的数据操作

//对模块的state this.$store.state.模块名.全局数据名称 或者 computed:{ ...mapState('模块名',['全局数据名称']); } //对模块的Mutations this.$store.commit('模块名/方法名'); 或者 computed:{ ...mapMutations('模块名',['方法名']); } //对模块的Actions this.$store.dispatch ('模块名/方法名'); 或者 computed:{ ...mapActions('模块名',['方法名']); } //对模块的getters this.$store.getters.模块名.名称 或者 computed:{ ...mapGetters('模块名',['名称']); }

4. vuex面试题汇总

vuex面试题汇总