vuex文件的放置位置

• 放在store-modules-app.js文件里面；

操作步骤

import Cookies from 'js-cookie'
const state = {
  openAdjustScope: false,
}

const mutations = {
  SET_ADJUST_VISIBLE: (state, visible) => {
    state.openAdjustScope = visible
  }
}

const actions = {
   setAdjustScopeVisible({ commit }, visible) {
    commit('SET_ADJUST_VISIBLE', visible)
  }
}

export default {
namespaced: true,
  state,
  mutations,
  actions
}

跳转之前页面点击按钮

methods:{
handleAdjust(row){
  this.$store.dispatch('app/setAdjustScopeVisible',true)

}
}

跳转之后打开页面弹窗

<el-dialog :title="title" :visible.sync = "openAdjustScope" @closed="onClosed">

</el-dialog>

computed:{

$adjustScope(){
  return this.$store.state.app.openAdjustScope
 }
},
watch:{
 $adjustScope(newVal, oldVal) { // 监听路由变化
     if (newVal) this.openAdjustScope = newVal
    }
}
created(){
 this.openAdjustScope = this.$store.state.app.openAdjustScope
},
methods:{
 onClosed(){
       this.$store.dispatch('app/setAdjustScopeVisible', false);
 }
}

• this.$store.dispatch，是传值给VUEX的mutation改变state
• 写法：this.$store.dispatch(‘action方法名’,值)

顺便复习一下vuex的用法

• 每个Vuex的核心就是store（仓库），'store'基本上就是一个容器，它包含你应用中大部分的状态（state）；
• vuex的状态存储是响应式的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么响应的组件也会相应的得到高校更新。
• 你不能直接改变store中的状态，改变store中的状态的唯一途径就是显式地提交（commit）mutation。这样使得我们可以方便地跟踪每一个状态的变化

vuex尚硅谷老师教学

• vuex是什么，概念：专门在Vue中实现集中式状态（数据）管理的一个组件。