vuex
一、vuex
vuex是一个专为Vue.js应用程序开发的状态管理模式。
实现组件全局状态(数据)管理的一种机制,可方便实现组件间数据的共享。
-- vuex 是单向数据流,因此不能用于表单元素。
1. 安装引用
- npm i vuex --save
- 在main.js中引入:
- import Vue from 'vue'
- import Vuex from 'vuex'
- Vue.use(Vuex)
- const store = new Vuex.Store({
state,
mutations,
actions,
getters
})
2. 核心概念
1) state (存放全局共享的实例)
vuex使用单一状态树,用一个对象就包含了全部的应用层级状态,作为一个“唯一数据源(SSOT)”存在。即每个应用应仅仅包含一个store实例。
当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会较冗余,因此可采用mapState 辅助函数来帮助生成计算属性:
import {mapState} from 'vuex'
export default {
...
compted: mapState({
count: state => state.count;
// 传字符串参数 'cont' 等同于 `state => state.count`
countAlias: 'count',
//为了能使用 this 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localcount
}
})
}
2) Getter (对state中的数据加工处理形成新的数据,不改变原数据)
可以认为是state的计算属性,getter的返回值会根据其依赖被缓存起来,且只有当它的依赖值发生改变才会被重新计算,getter接受state作为其第一个参数,也可接受其他getter作为第二个参数。
const store = new Vuex.Store({
state: {
todos: [
{id: 1, text: '...', done: true},
{id: 2, text: '...', done: false},
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done);
}
}
})
mapGetters 辅助函数将store中的getter映射到局部计算属性:
import {mapGetters} from 'vuex'
export default {
...
computed: {
...mapGetters(['doneTodos',... ])
// 或使用对象形式
...mapGetters({
todos: 'doneTodos'
})
}
}
3) Mutations : 更改Vuex的store中的状态的唯一方法是提交mutation。
mtations中不能执行异步操作,要触发mutation事件需要调用store.commit方法。
也可使用mapMutations辅助函数将组件中的methods映射为store.commit调用。
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state, n) {
state.count += n;
}
}
})
import {mapMutations} from 'vuex'
export default {
...
methods: {
handle() {
this.$store.commit( 'increment' )
}
// 或
...mapMutations(['increment ',... ]) //将 this.increment ()映射为 this.$store.commit( 'increment' )
// 或
...mapMutations({
add: 'increment' //将 this.add()映射为 this.$store.commit( 'increment' )
})
}
}
4) action 不能直接修改state中的数据
1. action 提交的是mutation,而不是直接变更状态
2. action可以包含任意异步操作。
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state, n) {
state.count += n;
}
},
actions: {
increment(context) {
context.commit('increment')
}
}
})
action函数接受一个与store实例具有相同方法和属性的context对象,因此可以调用context.commit()提交一个mutation,或通过context.state或context.getters来获取state和getters.
action通过 store.dispatch来获取
methods: {
this.$store.dispatch('increment')
}
可使用mapActions 辅助函数将组件的methods 映射为 store.dispatch 调用。
import {mapActions} from 'vuex'
methods: {
...mapActions([ 'increment' ])
// 或
...mapActions({add: 'increment'})
}
5) Module
Vuex允许将store分隔成模块,每个模块有自己的state, mutation, action, getter, 甚至是嵌套子模块。