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. 在页面中使用

   <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>
   

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