上一篇总结了语言的切换国际化,在login-index文件中,遇到了登录后的操作,接触到了vuex,这一篇就了解一下vuex吧
简单的说vuex对vue中多个组件共享的状态进行集中式的管理(读/写)
Vuex的核心
当我们在页面上点击一个按钮,它会处发(dispatch)一个action, action 随后会执行(commit)一个mutation, mutation 立即会改变state, state 改变以后,我们的页面会state 获取数据,页面发生了变化。 Store 对象,包含了我们谈到的所有内容,action, state, mutation,所以是核心了
状态管理核心状态管理有5个核心,分别是state、getter、mutation、action以及module。
1、state
state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue.js的组件中才能获取你定义的这个对象的状态。
2、getter
getter有点类似vue.js的计算属性,当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算
3、mutation
更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。
4、action
action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。在页面中如果我们要用这个action,则需要执行store.dispatch
5、module module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。
Vuex实例操作
只看概念的话不是很好理解,通过官网的实例分析各个环节
如图,Vuex核心模块就是有颜色区域,介绍下流程:
1.state是在vuex中设置的初始值,也就是需要共享和更改的变量。通过store进行访问,虽然是计算方法,但是用法也是想属性一样访问$store.getters。
3.actions是修改state的动作,页面组件触发通过dispatch方法请求,传递给mutations。
4.mutations:是直接对state进行修改,由acitons通过commit方法提交。
实例
app.vue
<template>
<div id="app">
<p>click {{$store.state.count}} times count is {{evenOrOdd}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">increment if odd</button>
<button @click="incrementAsync">increment async</button>
</div>
</template>
<script>
export default {
//计算属性
computed: {
evenOrOdd() {
return this.$store.getters.evenOrOdd;
}
},
methods: {
// 增加
increment() {
// const count = this.count;
// this.count = count + 1;
this.$store.dispatch("increment");
},
decrement() {
this.$store.dispatch("decrement");
// const count = this.count;
// this.count = count - 1;
},
// 如果是奇数就加1
incrementIfOdd() {
this.$store.dispatch("incrementIfOdd");
// const count = this.count;
// if (count % 2 === 1) {
// this.count = count + 1;
// }
},
incrementAsync() {
this.$store.dispatch("incrementAsync");
// setTimeout(() => {
// const count = this.count;
// this.count = count + 1;
// }, 1000);
}
}
};
</script>
store.js
import Vue from 'vue'
import vuex from 'vuex'
// vuex的核心管理模块
Vue.use(vuex)
const state = {
count: 0
}
const mutations = {
// 增加的mutation
INCREMENT(state) {
state.count++
},
// 减少的木塔tion
DECREMENT() {
state.count--
},
INCREMENTIFODD() {
state.count++
},
INCREMENTASYNC() {
state.count++
}
}
const actions = {
increment({ commit, state }, data) {
// 增加的action
commit('INCREMENT')
},
decrement({ commit, state }, data) {
commit('DECREMENT')
},
// 有条件aciton commit 和 state都是作为参数传递的
incrementIfOdd({ commit, state }, data) {
if (state.count % 2 === 1) {
commit('INCREMENTIFODD')
}
},
//异步action 可直接使用
incrementAsync({ commit, state }, data) {
setTimeout(() => {
commit('INCREMENTASYNC')
}, 1000)
}
}
const getters = {
// 对应外面组件的计算属性
evenOrOdd(state) {
return state.count % 2 === 0 ? '偶数' : '奇数 '
}
}
export default new vuex.Store({
state, //状态
mutations, // 包含多个更新state函数的对象
actions, //包含多个对应事件回调函数的对象
getters //包含多个getter 计算属性函数的对象
})