2020-02-28 ts vuex状态管理

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:模块,如果状态过多,可以拆分成模块,最后在入口通过...解构引入

1. 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 = '健康';
   

2. 定义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: {},
   });
   

3. 在页面中使用

4. 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 })
     }
   }
   

5. 使用方法

   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
   
     @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)
     }
   }