Vuex简明教程
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（源于官网）vue
状态的自我管理应该包含：vuex
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入致使的状态变化。 （源于官网）
Vuex 应用的核心就是 store（仓库，能够理解为容器），store 包含着应用中的大部分状态（state），用户不能直接改变 store 中的状态。改变 store 中的状态的惟一途径就是显式地提交 (commit) mutation（源于官网）redux
开始
/// index.js 入口文件
import Vue from 'vue';
import Vuex from 'vuex';
import main from '../component/main'
Vue.use(Vuex); // 要注意这里须要启用 Vuex
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
}) // 设置了一个 Store
let vm = new Vue({
el: '#app',
render: h => h(main),
store // 全局注入，全部组件都可使用这个 store
})
...
/// main.vue 子组件
<template>
<div>
{{ msg }} - {{ count }}
<button @click="incream">add count</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'msg'
}
},
computed: {
count () {
return this.$store.state.count
}
},
methods: {
incream () {
this.$store.commit('increment');
}
}
}
</script>
/// 注入的store，能够经过 this.$store 获取
复制代码
state
Vuex 使用单一状态树，用一个对象就包含了所有的应用层级状态。单一状态树让咱们可以直接地定位任一特定的状态片断，在调试的过程当中也能轻易地取得整个当前应用状态的快照。（源于官网）数组
从 store 实例中读取 state 最简单的方法就是在 computed 中返回某个状态（源于官网）缓存
若是把数据获取置于data中，初始化时能够正常获取，但更新后并不能同步更新bash
mapState
mapState 辅助函数帮助咱们生成计算属性（源于官网）app
import { mapState } from 'vuex';
...
computed: mapState({
count (state) { // 在这个方法中能够直接使用state，不用使用 this.$store.state
return state.count
},
count1: state => state.count, // 这种是上面写法的简写
count2: 'count' // 这种是 state => state.count 的简写
}), // 这个方法最终会返回一个对象
...
/// 若是映射的计算属性的名称与 state 的子节点名称相同时，咱们能够简化给 mapState 传一个字符串数组
computed: mapState([
'count' // 映射 this.count 为 store.state.count
])
...
/// 通常不会使用上面写法，由于这样其余计算属性就没法添加，最好利用这个函数会返回对象的特性，直接使用对象展开的写法
computed: {
...mapState([
'count'
]),
info () {
return `${this.msg} info`
}
},
复制代码
Getter
Getter（能够认为是 store 的计算属性），就像计算属性同样，Getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算（源于官网，稍改）异步
- Getter 接受 state 做为其第一个参数
/// 定义时，能够把其看成 state 的计算属性
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
setCount (state) {
return `set count: ${state.count}`
}
},
复制代码
- 经过属性直接访问（this.$stroe.getters）
computed: {
showSetCount () { // 访问时能够经过 this.$store.getters 访问
return this.$store.getters.setCount
},
复制代码
- Getter 也能够接受其余 getter 做为第二个参数
getters: {
setCount (state) {
return `set count: ${state.count}`
},
allMsg (state, getters) {
return `all ${getters.setCount}` // 这里的 getters 和 state 同样都是当前 store 下的
}
}
复制代码
mapGetters
同上文的 mapState 同样使用async
import { mapState, mapGetters } from 'vuex';
...
computed: {
...mapGetters({
showSetCount: 'setCount',
showAllMsg: 'allMsg'
}),
}
复制代码
Mutation
mutation 是更改 store 中状态的惟一方式，每一个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)，不能直接调用一个 mutation handler，须要经过 store.commit 方法进行调用（源于官网，稍改）函数
- 回调函数会接受 state 做为第一个参数
mutations: {
increment (state) {
state.count++
}
}
...
<button @click="incream">add count</button>
...
methods: {
incream () {
this.$store.commit('increment'); // 经过 store.commit 触发
}
}
复制代码
- Payload
/// commit 接收第二个参数，这样外部数据就能够更新到仓库中
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
...
methods: {
incream () {
this.$store.commit('increment', {
amount: 20
});
}
},
/// 若是你是redux的使用者，可能更习惯对象风格的代码提交
incream () {
this.$store.commit({
type: 'increment',
amount: 20
})
}
复制代码
mapMutations
/// 若是使用了 types 的方式，应该都要用下面方式，调用时直接传 payload
methods: {
...mapMutations({
'incream': INCREMENT
})
},
...
/// 在调用处，直接传参
<button @click="incream({amount: 20})">add count</button>
复制代码
须要遵照的规则
- 最好提早在你的 store 中初始化好全部所需属性
- 当须要在对象上添加新属性时，利用对象展开运算符，使用新对象替换老对象
state.obj = { ...state.obj, newProp: 123 }
复制代码
- 使用常量替代 Mutation 事件类型（这是类 Flux 的状态管理都建议的作法，统一管理，统一维护）
/// types.js
export const INCREMENT = 'INCREMENT';
...
/// index.js
import { INCREMENT } from './types';
...
mutations: {
[INCREMENT] (state, payload) {
state.count += payload.amount
}
}
...
/// main.vue
import { INCREMENT } from '../script/types';
...
methods: {
incream () {
this.$store.commit({
type: INCREMENT,
amount: 20
})
}
},
复制代码
- Mutation 必须是同步函数（保证状态的变动是可追踪的），若是须要使用异步方法用 Action
Action
- action 提交的是 mutation，不能直接变动状态（state）
- action 能够包含异步操做，action 经过 dispatch 触发
/// index.js
actions: {
// action 能够是同步方法，也能够是异步方法
increment (context) {
context.commit(INCREMENT, {amount: 10})
}
}
...
/// main.vue
methods: {
incream () {
this.$store.dispatch('increment') // 经过 dispatch 触发 action
}
},
复制代码
context
- Action 函数接受一个与 store 实例具备相同方法和属性的 context 对象，能够调用 context.commit 提交一个 mutation，或者经过 context.state 和 context.getters 来获取 state 和 getters。（源于官网）
// 使用对象解构简化操做
increment ({commit}) {
commit(INCREMENT, {amount: 10})
}
复制代码
- Action 函数接受第二个参数用做 payload
increment ({commit}, payload) {
commit(INCREMENT, {amount: payload.amount})
}
...
/// main.vue
incream () {
// 以 payload 的形式调用
this.$store.dispatch('increment', {
amount: 15
})
...
// 还能够用对象形式调用
this.$store.dispatch({
type: 'increment',
amount: 15
})
}
复制代码
mapActions
methods: {
...mapActions({
incream: 'increment'
})
}
...
// 在方法调用处传 payload
<button @click="incream({amount: 15})">add count</button>
复制代码
组合 Action
能够在action中写各类异步方法，来组合复杂的业务逻辑
actions: {
increment ({commit, dispatch}, payload) { // context 对象也有 dispatch
return new Promise((resolve, reject) => {
setTimeout(() => {
commit(INCREMENT, {amount: payload.amount}) // 触发 Mutations 更新
dispatch('log') // 在一个 action 中触发另一个 action
resolve({
code: '000000'
}) // 返回异步处理状况
}, 500); // 模拟接口返回
})
},
log () {
console.log('日志.....')
}
}
...
/// main.vue
<button @click="incream({amount: 15}).then(doneCheck)">add count</button>
...
methods: {
...mapActions({
incream: 'increment'
}),
doneCheck (status) {
console.log('status', status); // 这里能够拿到异步处理结果来继续后续逻辑
}
},
复制代码
这里用 Promise 模拟了一个接口处理状况，在 action 中触发状态更新，并触发另一个 action，返回异步结果供调用函数使用（还可使用 async / await 更加简化代码）
Module
使用单一状态树，应用的全部状态会集中到一个比较大的对象。当应用变得很是复杂时，store 对象就有可能变得至关臃肿。
Vuex 容许咱们将 store 分割成模块（module），每一个模块拥有本身的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行一样方式的分割（源于官网）
/// index.js
const countModule = {
state: () => ({ // 子 store 下的 state 用这种函数的返回的形式，缘由和组件内data 定义同样
count: 0
}),
getters: {
setCount (state) {
return `set count: ${state.count}`
},
allMsg (state, getters) {
return `all ${getters.setCount}`
}
},
mutations: {
[INCREMENT] (state, payload) {
state.count += payload.amount
}
},
actions: {
increment ({commit, dispatch}, payload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit(INCREMENT, {amount: payload.amount})
dispatch('log')
resolve({
code: '000000'
})
}, 500);
})
},
log () {
console.log('日志.....')
}
}
}
const infoModule = {
state: () => ({
info: 'store info'
}),
getters: {
allMsg (state) {
return `show ${state.info}`
}
}
}
const store = new Vuex.Store({
modules: { // 分别定义两个store经过modules的方式组合在一块儿
countModule,
infoModule
}
})
...
/// main.vue
/// 使用时，除state外，和以前使用方式一致
computed: {
...mapState({
count: state => state.countModule.count, // state 要指定模块
info: state => state.infoModule.info
}),
...mapGetters({
showSetCount: 'setCount',
showAllMsg: 'allMsg'
}),
},
methods: {
...mapActions({
incream: 'increment'
}),
}
...
/// 若是想保持 mapState 中数组的简介写法，能够这么改造下
...mapState([
'countModule',
'infoModule'
]), // mapState 中直接导入模块名
...
{{ countModule.count }} - {{ infoModule.info }}
/// 使用时按模块名去获取 state
复制代码
模块中只有 state 在使用时须要特别指明模块，action、mutation 和 getter 由于是注册在全局 store 上，因此能够直接使用，经过打印 this.$store 也看到两个不一样模块的 getters 是都加挂在 store 实例对象上
rootState
/// 若是外层 store 中也有 state，能够经过 rootState 获取
const store = new Vuex.Store({
modules: {
countModule,
infoModule
},
state: {
copyright: 'xxx company'
}
})
/// getters、mutations 的第三个参数表示的是 rootState(名字能够随意)
getters: {
setCount (state, getters, rootState) {
return `set count: ${state.count}`
},
...
mutations: {
[INCREMENT] (state, payload, rootState) {
...
/// action中则必须使用(rootState这个变量名)
actions: {
increment ({commit, dispatch, rootState}, payload) {
复制代码
命名空间
我感受不必使用，若是咱们在拆分模块时，模块名是一个有明显语意的名字，在定义 action、getters 这些内容时，用 模块名+属性/方法名 的方式同样能达到相同的功效，这样也能够很明晰的知道这个方法属于哪一个模块。
这样也能够有很高的复用性，封装型也不差，使用起来也简单。
/// index.js
const infoModule = {
getters: {
infoModuleShowInfo (state) {
return `show ${state.info}`
}
}
...
/// main.vue
...mapGetters({
showInfo: 'infoModuleShowInfo'
}),
...
/// 模块名+属性名，使用时直接用 infoModuleShowInfo，并且能看出是属于 infoModule
复制代码
插件
能够在 store 的根节点下，使用 plugins 的形式加挂插件
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
复制代码
Vuex 内置了 logger 插件
import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
plugins: [createLogger()]
})
复制代码
表单处理
Vuex 的 state 上使用 v-model，须要使用带有 setter 的双向绑定计算属性
const store = new Vuex.Store({
modules: {
countModule,
infoModule
},
state: {
copyright: '2020 company',
auther: 'rede'
},
getters: {
bookInfo (state) {
return `${state.auther} @ ${state.copyright}`
}
},
actions: {
updataAutherAction ({commit}, payload) {
commit('updataAuther', {
value: payload.value
})
}
},
mutations: {
updataAuther (state, payload) {
state.auther = payload.value
}
}
})
...
/// main.vue
<input type="text" v-model="auther">
<div>{{bookInfo}}</div>
...
computed: {
...mapGetters({
bookInfo: 'bookInfo'
}),
auther:{
get () {
return this.$store.state.auther
},
set (value) {
this.updataAutherAction({
value
})
}
},
...
复制代码
相关文章
- 1. Gitbook简明教程
- 2. reStructuredText 简明教程
- 3. vgo简明教程
- 4. tig简明教程
- 5. Github 简明教程
- 6. Git简明教程
- 7. Python3 简明教程
- 8. Mockito 简明教程
- 9. vim简明教程
- 10. NGINX_简明教程
- 更多相关文章...
- • Maven 教程 - Maven教程
- • Lua 教程 - Lua 教程
- • Github 简明教程
- • Git可视化极简易教程 — Git GUI使用方法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字节跳动21届秋招运营两轮面试经验分享
- 2. Java 3 年，25K 多吗？
- 3. mysql安装部署
- 4. web前端开发中父链和子链方式实现通信
- 5. 3.1.6 spark体系之分布式计算-scala编程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在线
- 8. 在线画图
- 9. devtools热部署
- 10. 编译和链接
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Gitbook简明教程
- 2. reStructuredText 简明教程
- 3. vgo简明教程
- 4. tig简明教程
- 5. Github 简明教程
- 6. Git简明教程
- 7. Python3 简明教程
- 8. Mockito 简明教程
- 9. vim简明教程
- 10. NGINX_简明教程