vue高度なステップアップ

Vuex
1.stateの使用
まずsrcフォルダの下にstoreフォルダを倉庫storeとして作成し、対応するストレージスペース、例えばstoreとしてjsファイルを作成する.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.store({
state: {                   //    
  count: 1
},
getters: {                //     
  getCount: function(state){
    return state.count * 5
  }
},
mutations: {         //    
  add: function(state){
    state.count += 1
  }
},
actions: {            //      
  addFun: function(context){
    context.commit('add')
  }
}
})

vueコンポーネントでの使用

         {{$store.state.count}}
computed:{
count(){
return this.$store.state.count
}
}
  state  
methods: {
  change(){
    this.$store.commit('add',args)    //    ，         
  },
  asyncChange() {
    this.$store.dispatch('addFun')   //    
  }
}

2.mapStateの使用
1.は.vueコンポーネントに導入、jsブロックに導入

import { mapState } from 'vuex'

2.はい.vueコンポーネントで使用され、一般的にcomputedでステータスの変更を傍受することができます.

computed：{
  ...mapState([        //mapState      ，        ，   ...
    ‘num’ ， //    
    ‘id’
  ])
}
 
computed: {
  ...mapState({
    num: (state)=>state.num,     //            
    id: (state)=>state.id
  })
}

mapAction   
  action   
this.$store.dispatch('function',args)

mapAction
import {mapActions} from 'vuex'
 methods: {
...mapActions(['fun1','fun2','fun3'])
 
...mapActions({
  fun1: 'fun1',
  fun2: 'fun2'
  })
}

mapMutations     //      ，          
  mutation   
this.$store.commit('function',args)

mapMutations   
import {mapMutations} from 'vuex'
methods:{
...mapMutations(['fun1','fun2'])
 
...mapMutations({
  fun1: 'fun1',
  fun2: 'fun2'
})
}

混入(mixin)
ミキシング(mixin)は、Vueコンポーネントの多重化可能な機能を配布するための非常に柔軟な方法を提供する.混入オブジェクトには、任意のコンポーネントオプションを含めることができます.コンポーネントが混入オブジェクトを使用する場合、すべての混入オブジェクトのオプションは、そのコンポーネント自体のオプションに「ブレンド」されます.**コンポーネントの思想は主に重複コードが似たような機能を持つコードを解決し、標準化、統一化するために用いられるが、先端ではインタフェースに現れる視覚効果が多く、機能を実現するにはほぼ同じであれば、インタフェースは個性化する必要があるが、あまり多くのpropsを伝えたくない場合はどうすればいいのだろうか.このときmixinはその使用場所があり、同じjsロジックを使用することができる.templateとcssカスタマイズで良い**
具体的には、srcの下にフォルダmixinを作成し、そのフォルダの下にcommonなどの機能名を付けるjsファイルを作成します.js

const toggle = {      //           
data(){
return {}
},
created(){},
methods:{} 
...                        //        
}
export toggle

はい.vueファイルでの使用

import { toggle } from '@/mixin/common.js'
export default {
mixins: [toggle]
}

注意:混入したものとモジュール内のものが衝突した場合は、モジュール内を使用します.
全体がmainに混入する.jsで定義

Vue.mixin({
  created: function () {
  }
  ...     //    
})