Vuex学习笔记整理

Vuex是什么

  • Vuex是一个专为Vue.js应用程序开发的状态管理模式

  • 用集中式存储管理应用的所有组建的状态,并以相应的规则保证状态以一种可预测的方式发生变化

  • Vuex背后的基本思想,借鉴了Flux、Redux

  • Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。

Vuex的核心概念

  • state:驱动应用的数据源

  • getters:为组件提供经过处理的数据源

  • mutations:用来更改state的唯一标准方式

  • actions:组件通过调用actions来提交mutation

  • modules:每个modules都有自己的state、getters、mutations、actions实现大型应用中业务模块数据的分治管理。

    img

视图变化,通过dispatch调用 vue-Actions,与后端的API交互获取数据,之后通过commit提交到Mutations,里用mutations这种方式来改变state数据源,最后修改后的数据源会显示在视图之上。这就是一整套组建数据变化的流程。

Vuex的使用规则

Vuex不限制你的代码结构,但需要遵守一些规则

  1. 应用层级的状态应该集中到单个store对象中

  2. 提交mutation是更改状态的唯一方法,并且这个过程是同步的

  3. 异步逻辑都应该封装到action里面

使用Vuex

1.首先安装Vuex,使用的是vue-cli 3.0的脚手架搭建的环境

$ npm install vuex 

2.在src文件夹下新建一个文件夹命名为store,并在当前文件夹下新建一个index.jsjs文件,这里的命名没有固定要求,而这个js文件可以理解为一个状态管理的文件,内容如下。

import Vue from 'vue'    //引入vue,也就是node_modules下的vue文件
import Vuex from 'vuex'  //引入vuex

Vue.use(Vuex)    //在Vue的实例上使用Vuex

const store = new Vuex.store()  //定义一个常量来保存实例化的Vuex对象

export default store;   //向外提供实例化的store接口

3.在全局下的main.js文件中引入store的配置文件,这样就可以在任何组件中使用store了,内容如下:

import store from './store'    //引入状态管理store

new Vue({
    render:h=> h(app),
    store,       //注册store(这里可以把store实例注入到所有的子组件中)
}).$mount('#app')

4.回到store文件下的管理文件index.js文件。注册store实例,其中包括state、getters、mutation、actions,代码如下:

import Vue from 'vue'    
import Vuex from 'vuex'  

Vue.use(Vuex)  
const state={   //全局需要的数据都放在这里管理
        count:1,
        lists:[],
    }
const getters={   //实时监听state值的变化(最新状态)
    
}
const mutations={   //管理修改state数据的方法
    
}
const actions={    //一些比较复杂的逻辑,同时供给mutation使用,异步方法建议放这里
    
}
const store = new Vuex.store({  //注册管理状态
    state,     //注册state
    getters,   //注册getters
    mutations,    //注册mutation
    actions     //注册actions
})  

export default store;   //向外提供实例化的store接口

5.如何在组件中使用store呢?首先在组件中注册管理状态

//在组件中注册state、getters、mutations、actions;这里不用全部注册,按需注册即可
import {mapState,mapGetters,mapMutations,mapActions}  from 'vuex'

...mapState(['...','...'])    //把store内的state数据映射出来
...mapGetters(['...','...'])   //把getters里面的方法映射出来
...mapActions(['...'...])
...mapMutations(['...','...'])

//stae里都是存放全局使用的数据,而getter里面是处理state数据的一些方法,mutation是修改state数据的方法,actions存放一些与数据无关的方法,但有时在修改数据时会用的方法。当使用...解构符映射出方法后,我们就可以直接调用映射出来的方法了。

Vuex的modules模块化

在真实的项目中,可能数据管理会有多种情况,而这时候就会引入vuex中的modules模块化,那如何使用模块化管理数据呢。

在store文件夹下创建一个文件夹modules,这个文件夹下存放不同情况下的数据管理,而每种情况下都会拥有自己的store实例和state、getters、mutation、actions方法。

//demo.js

const state={
    count:1,
    complete:false,
}
const getters={

}
const mutations={

}
const actions={

}
export default{
namespaced:true,   //用于全局引用当前文件里面的方法运用文件明作为标识符
state,
getters,
mutations,
actions
}  

回到store文件夹下创建状态管理文件index.js,引入需要管理的状态数据

import Vue from 'vue'
import Vuex from 'Vuex'
import demo from './modules/demo'   //引入不同模块的state
import ... from './modules/...' 

Vue.use(Vuex)

export default new Vuex.store({
 modules:{
    demo,
    ....
 }
})

配置好以后就是在组件中使用不同模块的state数据了,因为每个模块都是分开的,所以在引用的时候需要区分到底使用的是那个模块state数据和方法。

import{mapState,mapGetters,mapMutation,mapActions} from 'vuex' //引入注册管理

//在引用到state的地方依旧是用过...解构映射方法,然后通过调用映射的方法来处理state数据。
...mapMutations('demo',{  //demo表示调用的是那个模块中的state数据
  complateName:mapName  
  //complateName代表在数据中定义的变量名;mapName表示demo中的mutation状态的方法名
})

陈健的个人博客,记录生活所见所感、学习笔记。专注于Web前端_SEO教程_读书心得。

1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫