Vuex基本概念
Vuex基本概念
StateGetterMutationActionModule
简单的Store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++;
}
}
});
store.commit('increment');
console.log(store.state.count);// 1
常见流程
Vue Component --dispatch--> Action
Action --commit--> Mutations
Mutations --mutate--> State
State --render--> Vue Component
State
获取vuex中的状态方法
在计算属性:computed中返回某个状态，要获取Vuex那个状态，要在computed中定义
由于在全局使用了Vue.use(Vuex)，所有组件可以通过this.$store拿到Vuex的store
const Counter = {
template: `<div>{{count}}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
由于computed的属性是函数，那么在返回状态之前，还有更多操作的空间。
mapState辅助函数
import {mapState} from 'vuex'
mapState辅助函数接收一个对象或者一个字符串数组，返回计算属性:computed
//这个可以单独放在一个文件中，重复使用
const vuexComputed = mapState({
//使用函数一定要有返回值
//箭头函数写法，第一参数是state
count: state => state.count,
//字符串形式 'count' 等同于 state => state.count
countAlias: 'count',
//可以使用'this'获取局部状态，使用常规函数，'this'会绑定为 computed的组件实例
countPlusLocalState (state) {
return state.count + this.localCount;
}
});
然后将mapState生成的vuexComputed和Vue组件实例的computed合并
使用对象展开运算符...
{
//...某个组件
computed: {
localComputed () {},
//使用对象展开运算符将vuexComputed混入到外部对象中
...vuexComputed
}
}
如果状态都只是单纯的显示，可以传一个字符串数组给mapState
const vuexComputed = mapState(['count']);
完整的demo:
//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
store.commit('increment')
console.log(store.state.count)
Vue.config.productionTip = false
Vue.prototype.$http = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
main.js要使用Vue.use(Vuex)以及将store添加到全局new Vue({store})
下面的所有子组件才可以拿到store
<template>
<div class="hello">
<div>{{count}}</div>
<div>{{countAlias}}</div>
<div>{{countPlusLocalState}}</div>
</div>
</template>
//Component HelloWorld
import {mapState} from 'vuex'
const vuexComputed = mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count + this.localCount
}
})
export default {
name: 'HelloWorld',
data () {
return {
localCount: 2
}
},
computed: {
...vuexComputed
}
}
Getter
Getter和计算属性:computed功能一样，只不过，它是store的，也会缓存计算的值。
组件中拿到getter
Getter会暴露store.getters对象。
const store = new Vuex.Store({
state: {
count: 0,
arr: [1, 2, 3, 4, 5, 6]
},
mutations: {
increment (state) {
state.count++
}
},
getters: {
get6: state => {
return state.arr.filter(num => num === 6)
}
}
})
{
//...某个组件
computed: {
get6 () {
return this.$store.getters.get6
}
}
}
在定义getter时，有两个参数传入state、getters
getters: {
get6: state => state.arr.filter(num => num === 6),
getNum: (state, getters) => {
return getters.get6
}
}
定义getter方法
//要使用函数要封装2层函数以上，在组件中拿到getTodoById时，默认执行第一层
getters: {
getTodoById: state => id => state.todos.find(todo => todo.id === id)
}
store.getters.getTodoById(2)
mapGetters
功能：将store中的getter映射到局部的计算属性computed中
和mapState类似，支持传入对象或者字符串数组，不过只能获取，不能重写，或者定义
//store
{
state: {
arr: [1, 2, 3, 4, 5, 6, 7, 8]
},
getters: {
get6: state => {
return state.arr.find(num => num === 6)
},
getNum: state => num => state.arr.find(n => n === num) || '错误num'
}
}
<template>
<div class='helloworld'>
<div>{{get6}}</div>
<div>{{getNum(4)}}</div>
</div>
</template>
const vuexGetter = mapGetters(['get6', 'getNum']);
//如果想定义别名使用对象的方式
//const vuexGetter = mapGetters({getSix: 'get6', getNumber: 'getNum'})
export default {
name: 'HelloWorld',
data () {
},
computed: {
...vuexGetter
}
}
Mutation
修改Vuex的store中的状态的唯一方式是commit mutation。
每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
//type: increment
store.commit('increment')
Payload
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
store.commit可以支持多参数模式，或者一个对象模式
store.commit({
type: 'increment',
amount: 10
})
其中一个对象模式和redux很像
而且事件类型type也可以使用常量来替代
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION';
// store.js
import Vuex from 'vuex';
import { SOME_MUTATION } from './mutation-types';
const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})
组件中提交mutation
在组件中可以通过this.$store.commit('xxx')提交mutation
还有就是使用mapMutations辅助函数，不过这次不是映射到计算属性，而是methods
使用方式和mapGetters一模一样
import { mapMutations } from 'vuex';
//对象的方式可以重新命名，字符串数组是直接引用
const vuexMutations = mapMutations(['increment']);
export default {
methods: {
...vuexMutations
}
}
Mutation 和 Reduce
Reduce的基本形式
(state, Action) => newState || state
转化为Mutation，那么
const Action = {
type: 'increment',
amount: 10
}
const initState = {
count: 0
}
export default (state = initState, Action) => {
switch(Action.type){
'increment':
return Object.assign({},state,{count: Action.amount + state.count})
default:
return state
}
}
在redux中改变状态：
store.dispatch(Action) -> reduce(state, Action) -> newState -> render view
在mutation中改变状态:
store.commit('increment', playload) -> mutations['increment'](state, playload) -> newState -> render view
Action
一般Action可以处理异步任务，而Mutation必须只能同步。
在异步流程中，先异步获得所需的数据，然后将返回的数据组合成Action。
在生成Action之前，有个createAction函数。
//Redux 思维的Action
const createAction = async (url) => {
const resData = await asyncGetData(url)
return {
type: 'SOME_TYPE',
resData
};
};
//Action 是对象
const Action = createAction('some url')
store.commit(Action)
在Vuex中的Action和Redux是有区别的
在Vuex中的Action充当着createAction的功能
commit应当只在action中使用，在commit之前还有dispatch
在Redux中，dispatch分发的直接是action
在Vuex中，dispatch分发的是createAction或者mutation，之后再commit action
Action 不同于 Mutation
- Action提交的是mutation,而不是直接变更状态
- Action可以包含任意异步操作
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action函数接受一个与store实例具有相同方法和属性的context对象
其中context不是store实例
分发Action
store.dispatch('increment')
组件中分发Action
组件中使用this.$store.dispatch('xxx')
或者使用mapActions辅助函数将actions映射到methods中
组合Action
dispatch函数在结束后返回一个Promise
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
Module
可以将store分割成模块Module
每个模块拥有自己的State、Mutation、Action、Getter
然后将所有模块组合成一个，就形成了一个状态树。
//一般我们可以按页面或者功能模块来划分模块
//大型项目可以按一个大模块划分
//然后在大漠块中再按页面划分
//如果还要更细，页面也可以切割成多个模块
//页面A的状态
const pageA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
//页面B的状态
const pageAB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: pageA,
b: pageAB
}
})
store.state.a // -> pageA 的状态
store.state.b // -> pageAB 的状态
模块的局部状态
每个模块的state都是局部状态，模块中的getter、mutation、传进来的state都是局部的
而action可以通过context.state拿到局部的状态,context.rootState拿到全局的
不同于mutation，getter也可以拿到全局状态，getter的第三个参数rootState
命名空间
默认情况下，模块内部的action、mutation和getter是注册在全局命名空间的--多个模块对同一mutation或action作出响应
多个模块对同一mutation或action作出响应，类似一个事件拥有多个处理程序（观察者模式）
在模块中添加namespace: true可以避免添加到全局队列中
添加命名空间后的getter : (state, getters, rootState, rootGetters) => {}
添加命名空间后的action context : getters访问局部的 rootGetters访问全局的
如果添加了命名空间，但是还是想暴露某个action或getter为全局，使用root:true
{
actions: {
someOtherAction ({dispatch}) {
dispatch('someAction')
}
},
modules: {
foo: {
namespaced: true,
actions: {
someAction: {
root: true,
handler (namespacedContext, payload) { ... } // -> 'someAction'
}
}
}
}
}
mapState、mapGetters、mapActions、mapMutations绑定带命名空间的模块。
computed: {
...mapState('some/nested/module', {
a: state => state.a,
b: state => state.b
})
},
methods: {
...mapActions('some/nested/module', [
'foo',
'bar'
])
}
还可以使用createNamespacedHelpers来绑定命名空间值，类似bind(context)
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module');
export default {
computed: {
// 在 `some/nested/module` 中查找
...mapState({
a: state => state.a,
b: state => state.b
})
},
methods: {
// 在 `some/nested/module` 中查找
...mapActions([
'foo',
'bar'
])
}
}
模块动态注册
// 注册模块 `myModule`
store.registerModule('myModule', {
// ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
// ...
})
//卸载'myModule'，只能卸载动态装载的模块
store.unregisterModule('myModule')
应用
如果是小型应用，可以按页面来分模块
//pagea.js
export default {
namespace:true,
state: {},
getters: {},
mutations: {},
actions: {}
}
//pageb.js
//pagec.js
//paged.js
//以上页面也是按pagea.js的方式
然后用一个文件引进所有模块，且全部暴露export
//modules.js
import pageA from './pagea.js'
import pageB from './pageb.js'
import pageC from './pagec.js'
import pageD from './paged.js'
export default {
pageA,
pageB,
pageC,
pageD
}
最后在main.js引入
//main.js
import modules from './modules/modules'
//将模块装进Store树中
const store = new Vuex.Store({
//全局
state: {},
getters: {},
mutations: {},
actions: {},
//模块
modules
})
//在组件中可以
this.$store.state.pageA
this.$store.state.pageB
this.$store.state.pageC
this.$store.state.pageD
