vue中如何监听vuex中的数据变化

JavaScript015

vue中如何监听vuex中的数据变化,第1张

首先通过计算属性来获取vuex中的数据

再通过watch来监听计算属性中的值来获取变化

通常我们在vue文件中监听数据的变更，尤其是vuex中数据的变更非常方便，通过watch函数可以很便捷的拿到数据变更前后的值，并作出相应的处理。

但是，当我们需要在诸如js等文件中监听到数据的变更就会很不容易，所幸，vue官网提供了解决思路

watch(fn: Function, callback: Function, options?: Object): Function

vuex的实例方法，接收两个参数：

第一个参数为fn，响应式地侦听 fn 的返回值，当值改变时调用回调函数。fn 接收 store 的 state 作为第一个参数，其 getter 作为第二个参数；

第二个参数为一个可选的对象参数表示 ，类似于vue的watch的回调函数，表示新旧值。

当我们不想监听时，可以通过定义变量接收该方法的返回值函数，调用该函数即可停止监听。

优点：我们可以监听我们某个特定需要的值，并非常方便的类似vue文件中那样拿到新旧变化值

弊端：当我们需要知道很多的值的变更情况时就得写大量的监听方法（可以考虑封装成方法或类）

用法示例：

1.在相应的js文件引入store

2.调用store的watch实例方法，第一个函数参数返回一个需要监听的state中的值（比如我想监听vuex中的pathName的变化情况，就返回该值）

3.第二个参数同vue的watch，接收2个参数代表新旧值

4.通过变量watchFun接收watch的返回值，调用该方法会停止监听

如上，就是如何在js等非vue文件中监听vuex数据的变化方式。

就如文中提到的缺点，当数据量过大时，写多次监听闲的不友好，可以考虑订阅mutation的方式管理大量数据。

由于一些演示，需要对编码名称等可快速进行修改，需要页面方便配置。由于build后的vue项目基本已经看不出原样，因此需要创建一个文件，并在打包的时候不会进行编译。

例如config.js定义了一个变量叫config，并在index.html页面引入后，那么在页面任何一处地方都可以直接使用。　

config.js：

index.html：

页面使用：

在开发环境中，我在public下创建了config.js文件，并且用export default方法进行导出。在页面使用的地方使用import config from XXX进入引入。开发过程中，没有出问题，但是在打包发布以后，发现修改config文件并不生效。

经过排查才意识到：不打包编译的js文件不识别es6语法，并且不应该使用import方法进行引入，应该按照原生的js文件进行使用。

原文地址： https://www.cnblogs.com/luoxuemei/p/11926472.html

比如说我在src/util下面有一个rem.js的文件，写成自执行函数

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function() {

var clientWidth = docEl.clientWidth

if (!clientWidth) return

docEl.style.fontSize = (clientWidth / 12) + 'px'

}

if (!doc.addEventListener) return

win.addEventListener(resizeEvt, recalc, false)

doc.addEventListener('DOMContentLoaded', recalc, false)})(document, window)然后在main.js中引用import './util/rem'，然后每个路由都运行起来了