状态机
状态机的五大核心
主状态机定义
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 子仓库
import userModule from './module.js/userModule';//
import tagNavModule from './module.js/tagNavModule';// 标签导航
export default new Vuex.Store({
// 定义数据
state: {
name: "qike",
count: 1, desc: "状态机", listUser: [{ id: 1, name: "张三" }, { id: 2, name: "王五" }],
objUser: { id: 3, name: "渣渣灰" },
},
//计算属性, 用于获取state中的数据,它可以在获取数据时进行计算,把计算后的值返回
//约定使用此方法暴露数据,不要直接操作数据
getters: {
getName(state) {
return state.desc + "版本号:7.0.1"
}
},
//同步方法:用于获取或是设置state中的数据
// 约定使用该方法修改数据,不然vue无法监测数据变化
// 约定方法名全大写
mutations: {
ADD_COUNT(state, val) {
state.count += val;
}
},
//异步方法:用于获取或是设置state中的数据,在actions中可以执行一些异步的任务,
// 例如调用接口,setTimeout等
actions: {
getName2(context, val) {
let name = "状态机二代目" + new Date().getTime();
setTimeout(() => {
context.state.desc = name;
}, 2000);
}
},
//用于定义子仓库的:模块化状态机
modules: {
userModule, tagNavModule
}
})
子状态机定义
export default {
// 当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
namespaced:true,
//
state:{
userInfo:{
name:"ZS",
id:2,
age:18,
hobby:['打篮球']
}
},
//
getters:{
user_getName(state){
return state.userInfo.name
}
},
//
mutations:{
ADD_AGE(state,val){
state.userInfo.age+=val;
}
},
//
actions:{
addHobby(context,val){
console.log(context);
setTimeout(() => {
context.state.userInfo.hobby.push(val)
}, 1000);
}
}
}
状态机的使用
在main.js中引入
// 状态机
import store from '@/store/index.js'
const app = new Vue({
store,
...App
})
直接使用 $store 不推介
methods: {
setTime() {
//组件中触发actions中的函数
this.$store.dispatch("setCurTime", new Date().getTime());
//在组件的js中触发mutations
this.$store.commit("INCOME", 1);
}
}
使用辅助函数
常用mapGetters, mapMutations, mapActions,一般不使用 mapState 没必要。
// 导入主仓库的辅助函数
import { mapGetters, mapMutations, mapActions, createNamespacedHelpers } from 'vuex';
// 导入 userModule 子仓库的辅助函数
let {
mapGetters: mapUserGetters,
mapMutations: mapUserMutations,
mapActions: mapUserActions,
} = createNamespacedHelpers('userModule');
computed: {
// 计算属性的辅助函数
...mapGetters(['getName']),
//获取子仓库的计算属性
...mapUserGetters(['user_getName']),
},
methods: {
// 方法的辅助函数
...mapMutations(['ADD_COUNT']),
...mapActions(['getName2']),
//子仓库
...mapUserMutations(['ADD_AGE']),
...mapUserActions(['addHobby']),
}