网页模版网站,爱装网,专业的画册设计网站,二维码制作工具网页Vuex状态管理
1 Vuex简介
1.1 什么是Vuex
Vuex是一个专为Vue.js应用程序开发的状态管理工具。它采用了集中式存储管理应用的所有的状态#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 简单来说#xff0c;Vuex是一个适用于在Vue项目开发时使用的状态管理…Vuex状态管理
1 Vuex简介
1.1 什么是Vuex
Vuex是一个专为Vue.js应用程序开发的状态管理工具。它采用了集中式存储管理应用的所有的状态并以相应的规则保证状态以一种可预测的方式发生变化。 简单来说Vuex是一个适用于在Vue项目开发时使用的状态管理工具如果在一个项目开发过程中频繁的使用组件传参的方式来实现数据的同步那在项目的扩展、管理和维护方面将是一个灾难。为此Vue为这些被多个组件频繁使用的数据提供了一个统一管理的工具即Vuex。
在具有Vuex的Vue项目中我们只需要把这些值定义在Vuex的状态管理对象中就可以在整个项目的组件内被使用。
1.2 Vuex安装与使用
在使用vue-cli脚手架工具创建项目的过程中可以手动选择安装Vuex也可以在项目创建完成后再独立安装。 使用NPM安装Vuex命令如下
npm i vuex --save使用yarn安装Vuex命令如下
yarn add vuex在一个模块化的打包系统中您必须显式地通过 Vue.use() 来注册 Vuex。 /src/store/index.js 文件代码如下
import Vue from vue
import Vuex from vuex//挂载Vuex
Vue.use(Vuex)//创建VueX对象
const store new Vuex.Store({state:{//存放的键值对就是所要管理的状态name:helloVueX}
})export default store将store挂载到当前项目的Vue实例当中去。 /main.js 文件代码如下
import Vue from vue
import App from ./App
import router from ./router
import store from ./storeVue.config.productionTip false/* eslint-disable no-new */
new Vue({el: #app,router,store, //store:store 和router一样将我们创建的Vuex实例挂载到这个vue实例中render: h h(App)
})在组件中使用Vuex。例如在App.vue中我们要将state中定义的name拿来在h1标签中显示。 /App.vue 文件代码如下
templatediv idappname:h1{{ $store.state.name }}/h1/div
/template或者要在组件方法中使用。代码如下
//...
methods:{add(){console.log(this.$store.state.name)}
},
//...2 Vuex核心概念
2.1 Vuex的工作流程
在Vuex对象中定义了五个成员来管理对象内的数据其中state是用来存放数据的剩下的成员都是用来操作state中数据的方法集。Vuex对象的成员有以下五个。
state存放状态。mutationsstate成员操作。getters加工state成员给外界。actions异步操作。modules模块化状态管理。
Vuex的具体工作流程如下图所示。
在Vuex的整个工作流程中会发现actions和mutations都是对state中的数据进行操作的方法集但是它们被应用在不同的场景下。例如Vue中的组件如果在调用Vuex的某个方法时需要向服务器发送请求或者是需要进行其他的异步操作这时就需要使用 $store.dispatch() 将数据派发的 actions 的对应方法中以此来保证数据的同步。actions 中方法的作用就是为了让 mutations 中的方法能在异步操作中起作用。 如果在操作state数据的过程中没有异步的行为那么就可以直接使用 $store.commit() 将数据提交到mutations中的方法然后在方法中对数据进行操作。更新后的state数据会被渲染到组件中。
2.2 Vuex对象核心成员
在Vuex对象中一共有以下五个核心成员。
State
state的用法非常简单就是用来存放Vuex中对数据。
Mutations
mutations是操作state数据的方法的集合比如对该数据的修改、增加、删除等等。在mutations中定义的每个方法都有两个默认参数语法如下
method(state,payload){
}形参state表示当前Vuex对象中的state形参payload是指该方法在被调用时传递的参数。 /store/index.js 文件代码如下
import Vue from vue
import Vuex from vuexVue.use(Vuex)export default new Vuex.Store({state: {num: 0},mutations: {add(state,i){state.num i}}
})在组件中使用 commit() 方法来提交数据例如在App.vue 文件中调用 mutations 内定义的函数代码如下
this.$store.commit(add,10)上面示例代码中执行 $store.commit() 方法可以将参数“10”传递给 mutations 内的 add() 方法并为 state 中的数据重新赋值。如果要传递多个参数可以使用对象的数据类型进行传值代码如下
this.$store.commit(add,{i:10, j:11})Getters
可以对state中的成员做一系列运算后然后在向外返回数据Getters中定义的方法有两个默认参数代码如下
import Vue from vue
import Vuex from vuexVue.use(Vuex)export default new Vuex.Store({state: {name: 张三,age: 20},getters: {nameInfo(state){return 姓名state.name},fullInfo(state,getters){return getters.nameInfo 年龄 state.age }}
})Getters中定义的方法默认参数分别表示
state当前VueX对象中的状态对象。getters当前getters对象用于将getters下的其他getter拿来用。
在组件内调用Getters方法代码如下
this.$store.getters.fullInfoActions
由于直接在mutation方法中进行异步操作将会引起数据失效。所以提供了Actions来专门进行异步操作最终提交mutation方法。代码如下
import Vue from vue
import Vuex from vuexVue.use(Vuex)export default new Vuex.Store({state: {num: 0},mutations: {add(state,payload){state.num payload}}actions: {add(context,payload){setTimeout((){context.commit(add,payload)},2000)}}
})Actions中的方法有两个默认参数分别表示
context上下文(相当于箭头函数中的this)对象。payload挂载参数。
在组件内调用Actions中定义的函数代码如下
this.$store.dispatch(add,10)由于是异步操作所以我们可以为Actions中的异步方法封装为一个Promise对象代码如下
add(context,payload){return new Promise((resolve,reject){setTimeout((){context.commit(add,payload)resolve()},2000)})
}Modules
当项目庞大状态非常多时可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块module。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。代码如下
import Vue from vue
import Vuex from vuexVue.use(Vuex)export default new Vuex.Store({modules: {a:{state: {},getters: {},//...}}
})在组件内调用模块a的状态代码如下
this.$store.state.a而提交或者dispatch某个方法和以前一样,会自动执行所有模块内的对应type的方法代码如下
this.$store.commit(editKey)
this.$store.dispatch(aEditKey)在使用Modules模块时需要注意以下细节。 模块中mutations和getters中的方法接受的第一个参数是自身局部模块内部的state代码如下
models:{a:{state:{key:5},mutations:{editKey(state){state.key 9}},....}
}getters中方法的第三个参数是根节点状态代码如下
models:{a:{state:{key:5},getters:{getKeyCount(state,getter,rootState){return rootState.key state.key}},....}
}actions中方法获取局部模块状态是context.state,根节点状态是context.rootState代码如下
models:{a:{state:{key:5},actions:{aEidtKey(context){if(context.state.key context.rootState.key){context.commit(editKey)}}},....}
}2.3 Vuex规范目录结构
如果把整个store都放在index.js中是不合理的所以需要拆分。示例目录格式如下
|- store
|- actions.js
|- getters.js
|- index.js
|- mutations.js
|- mutations_type.js ##该项为存放mutaions方法常量的文件按需要可加入
|
|- modules
|- Astore.js对应的内容存放在对应的文件中在/store/index.js文件中存放并导出store对象。state中的数据尽量放在index.js中。而modules中的Astore局部模块状态如果多的话也可以进行细分。
