Vue进阶（幺捌零）：JS 逻辑层向 Vue 视图层传值

一、前言

项目开发过程中，组件通过render()函数渲染生成，并在组件内部定义了自定义拖拽指令。自定义拖拽指令实现了用户可以进行元素拖拽、缩放等一系列逻辑处理的动作。

另一个逻辑处理页面由Vue实现，该页面可以实时展示元素相关属性信息（包括size、width、height及left、top等属性）。

二、思路

1. 监听器方式实现；
2. Vuex state实现;

三、代码实现

.js

// 鼠标按下事件
el.onmousedown = function (e) {
  document.onmouseup = function (e) {
	  // Vuex state实现方式
	  store.commit('domAzimuth/SET_DOMAZIMUTION', el.style.cssText);
	  // 监听器实现方式
	  // window.postMessage({domStyle: domStyle}, '*')
}

}

.vue

    computed: {
      ...mapGetters('domAzimuth', ['directProps']),
      domStyle () {
        return this.directProps
      }
    },
    // 监听器方式中，务必在页面销毁前释放掉监听器，否则会造成内存泄漏！
    beforeDestroy () {
//      window.removeEventListener('message', this.listenerMessage)
    },
    mounted () {
//      window.addEventListener('message', this.listenerMessage)
    },
}

四、效果

五、延伸阅读

在JS 向 Vue 传值过程中，当使用axios请求后台时，后台无法获取前端传参数据。

qs 是一个增加了一些安全性查询字符串解析和序列化字符串的库。首先使用如下语句安装：

npm install qs

在组件中应用

import qs from 'qs'

或定义为全局组件：

//在main.js引入qs  
import qs from  'qs'  

//配全局属性配置，在任意组件内可以使用this.$qs获取qs对象 
Vue.prototype.$qs = qs

主要使用qs.parse(),qs.string。

• qs.parse()是将URL解析成对象形式;

• qs.stringify()是将对象序列化成URL的形式，以&进行拼接;

具体例子如下：

let data = qs.stringify({
    "username":this.username,
    "password":this.password
});

序列化后的结构如下：

username=renping&password=123456

六、拓展阅读

• 《Vue进阶（幺肆捌）：Vuex辅助函数详解》
• 《Vue进阶（二十七）：Vuex之getters,mapGetters,…mapGetters详解》
• 《Vue进阶（四十三）：Vuex之Mutations详解》
• 官网