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>
不足之處，請大家不吝指教！！！