1. 程式人生 > 實用技巧 >vue-elementui-template的vuex簡單使用以及window.open新頁面踩坑記錄和解決辦法

vue-elementui-template的vuex簡單使用以及window.open新頁面踩坑記錄和解決辦法

一:vue-elementui-template的vuex簡單使用

  1、在store/modules/user.js 的mutations中新增

    

SET_WARMSTATUS: (state, data) => {
    state.warmStatus = data
  }

  

2、在action裡新增

warmStatus({commit, state}, data) {
      commit('SET_WARMSTATUS', data)
  },

  

3. 在元件內修改兩種方法,關於action和mutations的區別具體看官網https://vuex.vuejs.org/zh/guide/

  1)修改action

this.$store.dispatch('user/warmStatus', '5')

  2)修改mutations

this.$store.commit('user/SET_WARMSTATUS', '5')

 二:坑

由於我是用window.open開啟的頁面,所以已經脫離了原來的vue例項,在裡面操作vuex沒有用了。。

  三:解決辦法

可以通過監聽localstorage的方法

  1)在操作的頁面

localStorage.setItem('warmStatus', '111')

  2)在需要監聽的頁面的created裡

window.addEventListener('storage',(event) => {
      // 你的操作
    })