状态管理 Vuex

window 全局管理数据

1. 将type类型放置在custom.d.ts中
2. 使用model数据管理模型封装在一个对象当中。分别管理fetch create save update remove
3. 在main.ts中获取数据xxx.fetch
4. 组件间直接将数据等于window.xxx

将 window 对象迁移到 store 文件中

实现之后整个对象封装在Stroe里面

将 model 合并在 store 文件当中

小技巧

Stroe 没有返回值，不能返回失败结果

state [data / this]

mutations [state payload]

使用 Computed 获取数据

store.commit 没有返回值，在 state 里面添加返回值

使用前技巧

1. Vue.use(Vuex)
2. Mian.ts => 初始化 new Vue

Mixin 与 Stroe

Mixin

// 独立组件，需使用官方插件
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export class TagHelper extends Vue {
	createTag() {...}
}

<!--  .Vue 文件引用，不需要添加函数 -->
<template>
  <Button class="createTag" @click="createTag">新建标签</Button>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { TagHelper } from '@/mixin/TagHelper'

@Component
export default class Labels extends mixins(TagHelper) {}
</script>

Vuex Store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  mutations: {
    createTag(name: string) {
      this.commit('save', { id: '1', name: 'good' })
    },
    save(state, payload: { id: string; name: string }) {
      const { id, name } = payload
    }
  },
  actions: {},
  modules: {}
})

Vuex 使用注意点

1. Stroe 没有返回值，不能返回失败结果，可通过更新 state 来获取值
2. 注意 this 对象的不同，在 store 内部，通过 state 来表示 vue
3. Vue 文件内需使用 Computed 来获取数据 get myData(){ return this.$stroe.state.myData }