vuex是专门为vue.js开发的状态管理模式,它将全部组件的状态集中的存储在一块儿,而且用相应的规则使这些状态以一种可预测的方式发生改变。vue
前面说到vuex是专门为vue.js开发的状态管理模式,那么究竟什么是“状态管理模式”呢? 以我目前对状态的理解就是组件在某个时刻呈现出的视图、数据的状态。在vue的项目开发中咱们常常会遇到多个组件共享某个状态。即:多个视图依赖同一组件 或者 不一样视图的行为须要改变同一状态。
对于这种状况父子组件以前经过props进行传参是很繁琐的,同时兄弟组件是没办法作到的。而且不一样视图之间只能经过事件触发或直接引用的方式传递数据。这显然是很麻烦的。
所以就有了vuex,他将组件的全部状态抽离出来,存储在全局的一个仓库里,这样无论组件在哪一个位置均可以获取到状态或者触发行为。vuex就像一个巨大的仓库同样能够为咱们存储着全部组件的状态和改变状态的行为,同时维持着视图和状态之间的独立性,使得代码变得结构更加清晰且易维护。vuex
npm install vuex --savenpm
import Vuex from 'vuex'
vue.use(Vuex)数组
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
复制代码
// 建立一个 Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
复制代码
因为 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态promise
store.commit('increment')
复制代码
注意:改变状态的惟一方式就是经过commit提交mutationbash
//引入mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可以使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了可以使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
复制代码
当映射的计算属性的名称与 state 的子节点名称相同时,咱们也能够给 mapState 传一个字符串数组。app
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
复制代码
//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)
}
}
})
复制代码
经过属性访问Getter异步
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
复制代码
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
复制代码
//它会接受 state 做为第一个参数:
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变动状态
state.count++
}
}
})
复制代码
两种提交方式async
//方式一
store.commit('increment', {
amount: 10
})
*******
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
//方式二 ——对象风格的提交方式
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
*******
store.commit({
type: 'increment',
amount: 10
})
复制代码
注册一个简单的action函数
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
//action接受一个和store有相同属性和方法的context 对象
//所以你能够调用 context.commit 提交一个 mutation
//经过 context.state 和 context.getters 来获取 state 和 getters
actions: {
increment (context) {
context.commit('increment')
}
}
})
复制代码
store.dispatch('increment')
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
复制代码
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}
复制代码
store.dispatch('actionA').then(() => {
// 处理Action返回的promise
})
复制代码
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
复制代码
const moduleA = {
state: { count: 0 },
mutations: {
increment (state) {
// 这里的 `state` 对象是模块的局部状态
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
复制代码
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
// 模块内容(module assets)
state: { ... }, // 模块内的状态已是嵌套的了,使用 `namespaced` 属性不会对其产生影响
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
actions: {
login () { ... } // -> dispatch('account/login')
},
mutations: {
login () { ... } // -> commit('account/login')
},
// 嵌套模块
modules: {
// 继承父模块的命名空间
myPage: {
state: { ... },
getters: {
profile () { ... } // -> getters['account/profile']
}
},
// 进一步嵌套命名空间
posts: {
namespaced: true,
state: { ... },
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
}
}
}
}
})
复制代码