vue 方法使用小结

1.常规使用

 methods: {
  fn(){
  .....
  }
 }

2.引入使用

utils.js

exprot let fn=function(){
  .....
 }

vue文件

import { fn } from "@/libs/utils";
 methods: {
  fu(){
  //调用
  fn()
 
  }
 }

3.全局挂载

mian.js

import html2canvas from "html2canvas";
Vue.prototype.$htmlcanvas = function (dom) {
  html2canvas(dom, {
    width: dom.offsetWidth,
    height: dom.offsetHeight,
    scale: 0.5,
    useCORS: true,
  }).then((canvas) => {
    console.log(canvas, "canvas");
    let url = canvas.toDataURL("image/png", 0.5);
    console.log(url, "url");
    return;
    app.shareScreenShot(url);
  });
};

vue文件调用

 <shareIcon @goapp="goapp" />
 //app 分享
    goapp(){
      let dom=this.$refs.imageWrapper
      this.$htmlcanvas(dom)
    }

全局组件

    this.$emit("goapp");

4.vuex进行数据管理

import vuex from "vuex";
Vue.use(vuex);
var store = new vuex.Store({
  //store对象
  state: {
    count: 222,
    vuexarr: []
  },
  mutations: {
    increment(state, payload) {
      state.count = payload;
    },
    add(state, payload) {
      state.vuexarr = payload;

    }
  },
  actions: {
    increment(context) {
      context.commit("increment");
    }
  }
});
new Vue({
  el: "#app",
  router,
  store, //实例挂载
  components: { App },
  template: "<App/>"
});

方法调用

this.$store.state.count//数据
this.$store.state.getters//数据
this.$store.commit('increment', 1);
this.$store.dispatch('increment', true);
或者 
import {mapState,mapMutations} from 'vuex';
 computed:{
   ...mapState(['count','vuexarr'])
  },

  methods: {
    ...mapMutations(['increment'])
  },

在组件上写方法

@click.native