6.1初识Vuex
6.1.1什么是Vuex
一套组件状态管理维护的解决方案,可以方便的实现组件之间的数据共享
使得Vue组件的状态更加容易维护
创建store实例
const store=new Vuex.Store({
state:{},
mutations:{}
})
6.1.2Vuex的下载和安装
1.script引入vuex.js
state选项用来存储数据
this.$store.state.name
store中的状态是响应式的:在使用时,在组件中调用store中的状态时仅需要在计算属性中返回即可
和computed结合使用
mapState辅助函数
当一个组件需要获取多个状态时,将这些状态都声明为计算属性有些麻烦,这时候可以使用mapState辅助函数来生成计算属性
mapState是状态映射,理解为将state数据映射为计算属性
mapState接收一个对象,对象中可以映射多个数据
对象中的key是计算属性的名字,value是一个箭头函数,箭头函数有一个state参数,然后直接将state的数据返回即可
将store挂载在vue实例中才能使用
2.npm安装vue-cli包
npm install vue-cli --save
略
6.1.3【案例】计数器
每一个Vuex应用的核心就是store(仓库),即响应式容器,它用来定义应用中数据以及数据处理工具
Vuex的状态存储是响应式的,当store中数据状态发生变化,那么页面中的store数据也发生相应变化
改变store中的状态的唯一途径就是显式地提交mutation,这样可以方便地跟踪每一个状态的变化
mutation中的方法需要用commit提交才能生效
increase中的state是形参
6.1.4Vuex状态管理模式
单向数据流机制:在Vue中,组件的状态变化是通过Vue单向数据流的设计理念实现的
单向数据流组成部分主要包括:
State:驱动应用的数据源
View:以声明方式将state映射到视图
Actions:响应在View上的用户输入导致的状态变化
如:
Vuex工作流程关系
actions、mutations和state的关系
6.2Vuex配置选项
6.2.1actions
actions类似于mutations,不同之处在于actions是异步执行的
actions函数接收store对象,用于完成mutations提交
actions方法是通过dispatch触发的而不是commit
如果想为actions方法添加参数,需要在test中添加一个形参
以上为两种触发actions方法的方式
setTimeout用于延迟调用mutations中的方法
action中的context形参其实就是store
总结:
actions类似于mutations,不同之处在于actions是异步执行的
actions函数接收store对象,用于mutations提交
6.2.2mutations
mutations是一个对象,可以定义多个方法
mutations方法用来操作state数据
mutations方法接收state对象作为参数(actions方法接收store对象作为参数)
在组件中通过store.commit('mutations方法名 ')来触发mutations方法执行
mutations同步:
在调试组件状态时,mutations提交的日志信息都会被记录下来
通过devtools来完成前一状态和后一状态的信息记录
触发mutations中的事件处理方法来更新页面状态的变化,这是一种同步状态
6.2.3getters
getters计算属性
类似于Vue实例中的computed属性
调用方式:
this.$store.getters
getters属性实现搜索框功能:
6.2.4modules
modules用来在store实例中定义模块对象
- modules是store实例对象的选项
- 对store对象仓库进行标准化管理
当到项目后期时,数据会变得非常多,通过modules可以实现数据的模块化管理
6.2.5plugins
Vuex中的插件配置选项为plugins,插件本身为函数
- 函数接收参数store对象作为参数
- store实例对象的subscribe函数可以用来处理mutations
- 函数接收参数为mutation和state
store.subscribe会在store初始化后调用,内部的回调函数会在每次mutation提交后调用,mutation格式为{type,payload}
6.2.6devtools
store实例配置中的devtools选项用来设置是否在devtools调试工具中启用Vuex
- 默认值为true,表示在启用,设为false表示停止使用
- devtools选项经常用在一个页面中存在多个store实例的情况