一、状态管理(vuex)简介
vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。
二、状态管理核心
状态管理有5个核心,分别是state、getter、mutation、action以及module。分别简单的介绍一下它们:
开始使用vuex,新建一个 sotre文件夹,分开维护 actions mutations getters
1、state
state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue.js的组件中才能获取你定义的这个对象的状态。
在store/index.js文件中新建vuex 的store实例
*as的意思是 导入这个文件里面的所有内容,就不用一个个实例来导入了。
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' // 导入响应的模块,*相当于引入了这个组件下所有导出的事例
import * as actions from './actions'
import * as mutations from './mutations'
Vue.use(Vuex)
// 首先声明一个需要全局维护的状态 state,比如 我这里举例的resturantName
const state = {
resturantName: '飞歌餐馆' // 默认值
// id: xxx 如果还有全局状态也可以在这里添加
// name:xxx
}
// 注册上面引入的各大模块
const store = new Vuex.Store({
state, // 共同维护的一个状态,state里面可以是很多个全局状态
getters, // 获取数据并渲染
actions, // 数据的异步操作
mutations // 处理数据的唯一途径,state的改变或赋值只能在这里
})
export default store // 导出store并在 main.js中引用注册。
另种封装
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
/* eslint-disable no-new */
const store = new Vuex.Store({
modules: {
user //包含state、actions、mutations
},
getters
})
export default store
2、getter
getter有点类似vue.js的计算属性,当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算。
// 获取最终的状态信息
export const resturantName = state => state.resturantName
3、mutation
更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。
// 提交 mutations是更改Vuex状态的唯一合法方法
export const modifyAName = (state, name) => { // A组件点击更改餐馆名称为 A餐馆
state.resturantName = name // 把方法传递过来的参数,赋值给state中的resturantName
}
export const modifyBName = (state, name) => { // B组件点击更改餐馆名称为 B餐馆
state.resturantName = name
}
4、action
action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action,则需要执行store.dispatch
// 给action注册事件处理函数。当这个函数被触发时候,将状态提交到mutations中处理
export function modifyAName({commit}, name) { // commit 提交;name即为点击后传递过来的参数,此时是 'A餐馆'
return commit ('modifyAName', name)
}
export function modifyBName({commit}, name) {
return commit ('modifyBName', name)
}
// ES6精简写法
// export const modifyAName = ({commit},name) => commit('modifyAName', name)
5、module
module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。
6.在main.js中导入 store实例
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, // 这样就能全局使用vuex了
components: { App },
template: '<App/>'
})
7.对于1、3、4可以整合一个store/modules/user 的js进行配合封装
const user = {
state: {
resturantName: '飞歌餐馆' // 默认值
// id: xxx 如果还有全局状态也可以在这里添加
// name:xxx
},
mutations: {
// 提交 mutations是更改Vuex状态的唯一合法方法
modifyAName : (state, name) => { // A组件点击更改餐馆名称为 A餐馆
state.resturantName = name // 把方法传递过来的参数,赋值给state中的resturantName
},
modifyBName : (state, name) => { // B组件点击更改餐馆名称为 B餐馆
state.resturantName = name
}
},
actions: {
// 给action注册事件处理函数。当这个函数被触发时候,将状态提交到mutations中处理
modifyAName({commit}, name) { // commit 提交;name即为点击后传递过来的参数,此时是 'A餐馆
return commit ('modifyAName', name)
},
modifyBName({commit}, name) {
return commit ('modifyBName', name)
}
// ES6精简写法
//modifyAName:({commit},name) => commit('modifyAName', name)
}
}
export default user
8.在组件A中,定义点击事件,点击 修改 名称,并把 名称在事件中用参数进行传递。
...mapactions 和 ...mapgetters都是vuex提供的语法糖,在底层已经封装好了,拿来就能用,简化了很多操作。
其中...mapActions(['clickAFn']) 相当于this.$store.dispatch('clickAFn',{参数}),mapActions中只需要指定方法名即可,参数省略。
...mapGetters(['resturantName'])相当于this.$store.getters.resturantName
A组件同理
<template>
<div class="componentsA">
<P class="title">组件A</P>
<P class="titleName">餐馆名称:{{resturantName}}</P>
<div>
<!-- 点击修改 为 A 餐馆 -->
<button class="btn" @click="modifyAName('A餐馆')">修改为A餐馆</button>
</div>
<div class="marTop">
<button class="btn" @click="trunToB">跳转到B页面</button>
</div>
</div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
name: 'A',
data () {
return {
}
},
methods:{
...mapActions( // 语法糖
['modifyAName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
),
trunToB () {
this.$router.push({path: '/componentsB'}) // 路由跳转到B
}
},
computed: {
...mapGetters(['resturantName']) // 动态计算属性,相当于this.$store.getters.resturantName
}
}
</script>
B组件同理
<template>
<div class="componentsB">
<P class="title">组件B</P>
<P class="titleName">餐馆名称:{{resturantName}}</P>
<div>
<!-- 点击修改 为 B 餐馆 -->
<button class="btn" @click="modifyBName('B餐馆')">修改为B餐馆</button>
</div>
<div class="marTop">
<button class="btn" @click="trunToA">跳转到A页面</button>
</div>
</div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
name: 'B',
data () {
return {
}
},
methods:{
...mapActions( // 语法糖
['modifyBName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
),
trunToA () {
this.$router.push({path: '/componentsA'}) // 路由跳转到A
}
},
computed: {
...mapGetters(['resturantName']) // 动态计算属性,相当于this.$store.getters.resturantName
}
}
</script>
多组件的中状态改变之dispatch 和 commit 的用法和区别
vue store存储commit 和dispatch
dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)
commit:同步操作,写法:this.$store.commit('mutations方法名',值)
参考文献:
github仓库地址:https://github.com/byla678/vuexdemo.git