在 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 进入，

1. 第一次 修改执行完毕，变成了 true 
2. 第二次 popup组件 会很奇葩的由于 双向绑定的 数据被修改了，就再执行一次 computed 中的 set  ，但是由于 vuex 中的 函数为 state.changeAppOpened = !state.changeAppOpened 里面的 数据也被修改为 反
3. 第三次  重复第二次的 步骤

。。。。。无限循环

然后浏览器就崩溃了

所以 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)
    }
  }
}

 

 

新人写博客，实在是乱七八糟的