vuex
state:定义存贮数据的仓库 ,可通过this.$store.state 或mapState访问
getter:获取 store 值,可认为是 store 的计算属性,可通过this.$store.getter 或 mapGetters访问
mutation:同步改变 store 值,为什么会设计成同步,因为mutation是直接改变 store 值, vue 对操作进行了记录,如果是异步无法追踪改变.可通过mapMutations调用
action:异步调用函数执行mutation,进而改变 store 值,可通过 this.$dispatch或mapActions 访问
modules:模块,如果状态过多,可以拆分成模块,最后在入口通过...解构引入
-
types.ts 定义静态字符串常量 (src/store/types.ts)
export const LOGIN: string = 'LOGIN_DOCTOR'; export const REFRESH_TOKEN: string = 'REFRESH_TOKEN'; export const LOGOUT: string = 'LOGOUT_DOCTOR'; export const TITLE: string = '健康';
-
定义store (src/store.ts)
import Vue from 'vue'; import Vuex from 'vuex'; import * as types from './store/types'; Vue.use(Vuex); export default new Vuex.Store({ state: { // 用户信息 user: {}, // token值 token: null, // 网站标题 title: '', }, mutations: { [types.LOGIN]: (state, data) => { localStorage.token = data; state.token = data; }, [types.REFRESH_TOKEN]: (state, data) => { localStorage.token = data; state.token = data; }, [types.LOGOUT]: (state: any) => { localStorage.removeItem('token'); state.user = null; state.token = null; }, [types.TITLE]: (state, data) => { state.title = data; }, }, actions: { loginAction(state, payload:any) { console.log('loginAction) } }, modules: {}, });
-
在页面中使用
<template> <div> {{token}} <div class='hello'> Token: <input v-model='token' type='text'> <div> <el-button type='primary' @click='changeName'>主要按钮</el-button> </div> <div> <el-button type='danger' @click='logout'>注销</el-button> </div> <div> <el-button type='danger' @click='getUserInfo'>获取用户信息</el-button> </div> </div> </div> </template> <script lang='ts'> import { Component, Vue } from 'vue-property-decorator'; import { State, Action } from 'vuex-class'; @Component({ components: { }, }) export default class Home extends Vue { // private token: string|null = this.$store.state.token; // 全局state action getters mutation的使用方法 @State('token') private token!: string; @Getter load!: boolean; /** // 上面两句相当于 computed: { token() { return this.$store.state.login }, load() { return this.$store.getters.load } }, **/ // 调用的时候: this.loginAction(paypload) 相当于 this.$store.dispatch('loginAction', payload) @Action loginAction!: (payload: any) => void; // 调用的时候: this.logoutMutation() 相当于 this.$store.commit(types.logout); @Mutation(types.LOGOUT) private logoutMutation!: () => void; // vue中data中的字段 private name!: string; private changeName() { this.name = `${this.name}hello world`; } private mounted() { // 相当于 this.$store.dispatch('loginAction', payload); this.loginAction({a: '测试loginAction'}); } // 登出 private async logout() { const response = await UsersHttp.logout({}); if (response.status === 200) { // this.$store.commit(types.LOGOUT); this.logoutMutation(); this.$router.push({ path: '/', }); } } // 获取用户信息 private async getUserInfo() { const response = await UsersHttp.getUserInfo({}); if (response.data.status === 200) { console.log('测试数据: 该模块存在控empty-block'); } } } </script>
-
namespace局部module的状态管理
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'; import { State, Getter, Action, Mutation, namespace } from 'vuex-class'; const userModuleStore = namespace('userModuleStore'); @Component export default class ViewMenuConditionComponent extends Vue { //模块内getters用法， @userModuleStore.Getter('getUserProps1') props1; @userModuleStore.Getter('getUserProps2') props2; @Action('foo') actionFoo // 全局的action调用方法 @Mutation('foo') mutationFoo // 全局的mutation调用方法 created () { this.props1 // -> store.userStore.prop1 this.props2 // -> store.userStore.prop2 this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true }) this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true }) } }
-
使用方法
import { Vue, Component, Prop, Watch } from 'vue-property-decorator' import { State, Getter, Mutation, Action } from 'vuex-class' import { Bind, Debounce } from 'lodash-decorators' import { UBT } from '@/decorator' import HelloWorld from '@/components/HelloWorld.vue' import BasicMixin from '@/mixin/PrintMixin' @Component({ components: { HelloWorld }, mixins: [BasicMixin] }) export default class EleComponent extends Vue { @Prop({ default: 'Hello' }) private text!: string @State(state => state.user) private user!: string @Getter('email') private email!: string private msg: string = 'Hello Element' private name: string = 'Typescript' private get userInfo (): string { return this.text + this.name } private set userInfo (val: string) { this.text = val } @Mutation('setUserEmail') private setUserEmail!: (email: string) => void @Action('getUserInfo') private getUserInfo!: (params: {token: string}) => Promise<any> @Watch('name', { deep: true }) private onNameChange () { console.log('name has been changed!') } @UBT('click', Date.now()) @Bind() @Debounce(300) private handleClick () { console.log('click', this.text) } }
