1. 使用方式

• javascript

<script>
export default {}
</script>

• typescript

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>
或者使用vue-property-decorator装饰器
<script lang="ts">
import { Component,  Vue } from "vue-property-decorator";
@Component
export default class App extends Vue {}
</script>

2. 组件引入方式

• javascript

<script>
import SearchInput from '@/components/SearchInput'
export default {
    components: { SearchInput },
}
</script>

• typescript

<script lang="ts">
import { Component,  Vue } from "vue-property-decorator";
import SearchInput from '@/components/SearchInput'
@Component({
    components:{SearchInput}
})
export default class App extends Vue {}
</script>

3. data

• javascript

<script>
export default {
    data(){
       return{
           value:'',
           list:[]
        }
    }
}
</script>

• typescript

<script lang="ts">
import { Component,  Vue } from "vue-property-decorator";
@Component
export default class App extends Vue {
     value:string = ''
     list: Array<object> = [];
}
</script>

4. computed计算属性

• javascript

<script>
export default {
   computed: {
       loginUrl(){
            let { loginUrl } = this.commonHosts;
            return loginUrl;
       }
   }
}
</script>

• typescript

<script lang="ts">
import { Component,  Vue } from "vue-property-decorator";
@Component
export default class App extends Vue {
    // computed
    get loginUrl() {
      let { loginUrl } = this.commonHosts;
      return loginUrl;
  }
}
</script>

5. Watch监听

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，比如我们 data 里有一个obj属性：当我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。如果我们需要监听obj里的属性a的值呢？这时候deep属性就派上用场了！

而immediate:true代表如果在 wacth 里声明了 loginUrl 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行

• javascript

<script>
export default {
   watch: {
       loginUrl(val){
          ... 你要做的事
       },
       //深度监听
        loginUrl2：{
          handler(val){
            ... 你要做的事
          },
          deep:true,
          immediate:true
       },
   }
}
</script>

• typescript

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
@Component
export default class App extends Vue {
    // watch
     @Watch("tokenExpire", { immediate: true, deep: true })
     changeToken(val: "tokenExpire") {
         ... 你要做的事 
     }
}
</script>

6. Prop组件传值

• javascript

<script>
export default {
   props:{
      init:{
          type:String,//[String,Number]多类型
          default:''
      },
      list:{
          type: Array,
          default: () => []
      }
   }
}
</script>

• typescript

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class App extends Vue {
      @Prop({ type: String, default: "" }) init!: string;
      // @Prop({ type: [String, Number], default: "" }) init!: string | number; // 多类型
      @Prop({ type: Array, default: () => [] }) list!: Array<string>;
}
</script>

7. mixins混入

全局引入 main.js

// 引用公用的方法
import  Mixin  from './mixins'
Vue.mixin(Mixin)

组件引入

• javascript

<script>
import { test } from '@/mixins/test'
import { common } from '@/mixins/common'
export default {
  mixins: [test，common],
}
</script>

• typescript

可以通过extends继承Mixins获取混入的数据，通过括号里的内容引入，要引入的混入的ts文件

<script lang="ts">
import { Component, Prop, Mixins, Vue } from "vue-property-decorator";
import { test } from '@/mixins/test.ts'
import { common } from '@/mixins/common.ts'
@Component
export default class Order extends Mixins(test,common) {
    created(){
        this.test()
    }
}
</script>

8. vuex状态管理

这个vuex用的是模块（module）。每个模块拥有自己的 state、mutation、action、getter

命名空间: namespaced: true

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

可以用vuex-persistedstate状态持久化来实现缓存状态 安装和使用

• javascript

<script>
import { mapState, mapGetters, mapMutations, mapActions} from 'vuex'
export default {
  computed: {
     //通过计算属性获取
     loginUrl(){
        return this.$store.state.financial.loginUrl
      },
    // 通过映射的方式
    ...mapState('financial', [
      'changeNowMonth', 
      'changeDate', 
      'chooseStoreInfo' // 财务选择门店的信息
    ]),
    ...mapState('common', [
      'commonHosts', // 公用的host
      'token'
    ]),
    ...mapGetters({
        loginUrl:'financial/loginUrl',
        timeData:'common/timeData'
    })
  },
  methods:{
    ...mapMutations({
        setBitShowMachine: 'common/setBitShowMachine', // 设置是否显示机器号
        setSeletedStoreInfo: 'chooseStore/setSeletedStoreInfo', // 设置选择门店的信息
    }),
     ...mapActions({
       getSelectAllShop: 'chooseStore/getSelectAllShop', // 获取门店的信息（下拉菜单）
       refreshWorking: 'chooseStore/refreshWorking', // 刷新shopWorking
    }),
  }
}
</script>

tyscript 可以使用vuex-class装饰器 安装以及使用

使用namespace来区分我们设置的模块名：PS： { namespace: "common" } 使用common模块

• typescript

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { State, Mutation, Action, namespace } from "vuex-class";
@Component
export default class App extends Vue {
    @State("isCollapse", { namespace: "common" }) isCollapse!: boolean;
    
    @Mutation("setCollapseState", { namespace: "common" }) setCollapseState: any;
    
    @Action("getSelectAllShop", { namespace: "chooseStore" }) getSelectAllShop: any;
}
</script>

不足之处，请大家不吝指教！！！