在 vuex 中使用 vux 的 popup 数据双向绑定

在下新手，写这个只是因为 被这个搞死了好多次，记录一下

store.js

import Vue from ' vue '

import Vuex from ' vuex '

Vue . use( Vuex)

export const store = new Vuex . Store( {

state : {

changeAppOpened : false

},

getters : {

changeApp : state => {

return state . changeAppOpened

}

},

mutations : {

changeApp ( state ) {

// 调用就 修改

state . changeAppOpened = ! state . changeAppOpened

}

},

actions : {

changeApp ({ commit }) {

commit( ' changeApp ')

}

}

})

changeApp.vue

import { Popup } from ' vux '

// 对 store.js 中的数据进行数据双向绑定

< popup v-model = " showPopup " position = " top " >

hello popup

popup >

computed : {

showPopup : {

get () { // 当拿取 对应的数据的时候

return this . $store . getters . changeApp

},

set ( value ) { // 当修改对应的数据的时候

console . log( value)

this . $store . commit( ' changeApp ') // 调用 changeApp 函数

}

}

}

启动popup的 组件：homeH.vue

主要目的就是点击那个  mid 部分能显示 popup

< div class = " mid " @click = " showChange " >

< img src = " ../assets/home/pufa_r2_c4.jpg " alt = "" >

< div class = " content " >

div >

div >

methods : {

showChange () {

this . $store . dispatch( ' changeApp ') . then( () => {

console . log( this . $store . getters . changeApp)

})

}

}

这里完全没问题，所以当我 很愉快的点击  mid 部分的时候。

浏览器崩溃了o(╥﹏╥)o，点一次，崩溃一次。还要我使用 管理器才能 关掉 chrome

我也差点奔溃╮(╯▽╰)╭

so

接下来就是各种尝试，然后去看官方文档，vuex 的 vux 的。。。

然后发现在 store.js 中输出的内容

完全没看错，就是无限执行了。

说实话，能得到这个结果我已经欣喜若狂了。然后继续检查。

发现 在 homeH.vue 点击了之后，

首先传了一个 undefined 进入，

第一次 修改执行完毕，变成了 true 

第二次 popup组件 会很奇葩的由于 双向绑定的 数据被修改了，就再执行一次 computed 中的 set  ，但是由于

          vuex 中的 函数为 state.changeAppOpened = !state.changeAppOpened 里面的 数据也被修改为 反

第三次  重复第二次的 步骤

。。。。。无限循环

然后浏览器就崩溃了

所以 store.js 中的 changeApp 被修改为 

changeApp ( state , value ) {

console . log( value)

if ( value !== undefined) {

state . changeAppOpened = value

} else {

state . changeAppOpened = ! state . changeAppOpened

}

}

而 changeApp.vue 中的 computed 被修改为

computed : {

showPopup : {

get () {

return this . $store . getters . changeApp

},

set ( value ) { // 增加了 value

console . log( value)

this . $store . commit( ' changeApp ' , value)

}

}

}

这样就结束了，我也不知道我讲了些什么