webassembly例子 add is not a function问题

参考网上列子

https://www.cnblogs.com/y-y-y-y/p/9897154.html?ivk_sa=1024320u

本人使用vue的方式去实现

 奈何执行到add方式提示add is not a function，百思不得其解

最好锁定在于instance.exports._add获取方法时是不需要下划线，改成instance.exports.add就毫无问题

 

Vue核心代码如下

export default {
  name: "App",
  data() {
    return {
      size: ""
    };
  },
  mounted() {
    this.loadWebAssembly("./wasm/math.wasm").then(instance => {
      let add = instance.exports.add; //取出c里面的方法
      let square = instance.exports.square; //取出c里面的方法
      console.log("10 + 20 =", add(10, 20));
      console.log("3*3 =", square(3));
      console.log("(2 + 5)*2 =", square(add(2 + 5)));
    });
  },
  methods: {
    loadWebAssembly(path, imports = {}) {
      return fetch(path) // 加载文件
        .then(response => response.arrayBuffer()) // 转成 ArrayBuffer
        .then(buffer => WebAssembly.compile(buffer))
        .then(module => {
          imports.env = imports.env || {}; // 开辟内存空间
          imports.env.memoryBase = imports.env.memoryBase || 0;
          if (!imports.env.memory) {
            imports.env.memory = new WebAssembly.Memory({ initial: 256 });
          } // 创建变量映射表
          imports.env.tableBase = imports.env.tableBase || 0;
          if (!imports.env.table) {
            // 在 MVP 版本中 element 只能是 "anyfunc"
            imports.env.table = new WebAssembly.Table({
              initial: 0,
              element: "anyfunc"
            });
          } // 创建 WebAssembly 实例
          return new WebAssembly.Instance(module, imports);
        });
    }
  }
};