vue.js官网中生态系统中给我们提供一个官方的插件vuex,利用这个插件我们可以集中式管理数据,一处修改,多处应用,多个组件依赖同一状态。主要应用于开发中大型项目。
首先:npm i vuex -S
引入插件 import Vuex from 'vuex'
Vuex是个对象,相关成员如下
成员 | 用途 |
---|---|
Store | 类,构造状态管理的实例 |
mapActions | 函数,通讯工具 |
mapMutations | 函数,通讯工具 |
mapGetters | 函数,通讯工具 |
mapState | 函数,通讯工具 |
状态管理 store实例相关成员
成员 | 用途 |
---|---|
dispatch | 实例方法,通讯工具 |
commit | 实例方法,通讯工具 |
state | 属性,获取公共数据 |
交互流程
components-> | actions-> | mutations-> | state | <-getters-> | ->components |
---|---|---|---|---|---|
发送请求 | 处理业务,异步 | 修改状态 | 状态 | 读取处理状态 | 渲染状态 |
dispatch | commit | state.key=value | {key:value} | state.key | {{key}} |
mapActions-> | <-mapGetters | ||||
mapMutations-> | -------------------> | <------------ | <-mapState | ||
commit-> | -------------------> | ||||
<------------ | <-state |
基础应用:
1、新建一个js文件 :// src/plugins/vuex.js
//配置 store
import Vue from 'vue';
import Vuex from 'vuex';//引入vuex包
Vue.use(Vuex);//安装插件到vue
import state from '../store/state.js'
import actions from '../store/actions.js'
import mutations from '../store/mutations.js'
import getters from '../store/getters.js'
let store = new Vuex.Store({//配置接受state等选项,值为对象
state,mutations,
getters,actions
});
export default store;//导出store实例给main.js
2、在main.js引入store实例
import store from './plugins/vuex.js'
new Vue({
render: h => h(App),
store//控制vue实例,为vue实例提供一个状态管理实例,管理整个vue公共状态
}).$mount('#app')
3、在// src/store/目录下打造state.js 、actions.js、mutations.js、getters.js。
let state={
count:0
}
export default state;
let actions = {
add:({commit,state},payload)=>{
//state 公共状态 payload 负载
commit('increment',payload)
}
};
export default actions;
let mutations={
increment:(state,payload)=>{
//state 仓库|公共数据 payload携带的负载
state.count+=payload;//mutations 不做业务,只负责突变state
}
};
export default mutations;
let getters = {
count:(state)=>{
//返回处理后的state ~~ computed
return state.count % 2 === 0 ? state.count + '偶数': state.count + '奇数'
}
};
export default getters;
在组件中的应用
<!--声明式 发送请求-->
<div @click="类型(负载)"></div>
<!--展示状态-->
<div>{{$store.state.count}}</div>
<div>{{count}}</div>
import {
mapActions,
mapMutations,
mapState,
mapGetters
} from 'vuex'
import store from '../plugins/vuex.js';
export default {
name: 'app',
methods: {
add() { //编程式 发送请求
store | this.$store.dispatch('add', 2) //-> actions
//store | this.$store.commit('increment',2) //-> mutations
//store | this.$store.dispatch|commit({type:'类型',payload:负载})
}
},
//mapActions 用来接管methods,返回一个对象
// methods:mapActions([
// 'add'
//])
//mapMutations 接管methods,跳过actions找mutations
//methods:mapMutations([
// 'increment'
// ])
// methods: {
// ...mapMutations([ //mapMutations 返回来一个对象
// 'increment'
// ]),
// ...mapActions(['add']), //mapActions 返回来一个对象
// show() { //组件内部methods
// ...
// }
// },
//mapGetters接管computed,返回一个对象
// computed: mapGetters([
// 'count'
// ]),
// computed: mapState([
// 'count'
// ]),
computed: {
// ...mapState([ //mapState返回一个对象
// 'count'
// ]),
...mapGetters([
'count'
]),
// count() { //组件内容计算属性
// return this.$store.state.count % 2 === 0 ?
// this.$store.state.count + '偶数' :
// this.$store.state.count + '奇数'
// }
}
}
状态管理主要是把握store里面的几个成员的交互流程!!!
注意一点在组件中的应用是否要加payload参数,依据methods中使用的那种请求方式(编程式发送请求,传payload参数;如果是mapMutations、mapActions接管methods,在调用处传参)