<template>
div>
a href="javascript:;" @click="dialogshow = true">点击</acommon-dialog :show.sync="dialogshow"></common-dialog>
弹框是否显示:{{dialogshow}}
>
>
script>
import commondialog from '@/components/dialog
export default {
name: parent,components:{
common-dialog:commondialog
},data () {
return {
dialogshow:false
}
},methods:{
}
}
>
el-dialog :visible.sync="elDialogShow" title="提示">
span>这是一段弹框信息span slot="footer" class="dialog-footer">
el-button @click="elDialogShow = false">取 消el-buttontype="primary">确 定el-dialog
export {
name:childrenshow],computed:{
elDialogShow:{
get(){
return this.show
},set(value){
.$emit(update:show {
};
}
}
>
<!--父组件-->
="$store.state.show = true"
弹框是否显示:{{$store.state.show}}
子组件="$store.state.show"其它代码省略>
import vuex from 'vuex'
Vue.use(vuex)
var store = new vuex.Store({
state:{
show:false
}
})
Vue({
el: '#app'
})
="$store.state.show = false">
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default
}
})
//vuex
import store from './store'
使用store
template: '<App/>'state下面不好管理，这就用modules。
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app' app模块数据
import user from './modules/user' 用户模块数据
import getters from './getters'
Vue.use(Vuex)
const store = Vuex.Store({
modules: {
app,user
},getters
})
export default store
const getters = {
show: state => state.app.show
}
export default getters
const moduleA = {
state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}
const moduleB = Vuex.Store({
modules: {
a: moduleA,b: moduleB
}
})
store.state.a -> moduleA 的状态
store.state.b -> moduleB 的状态
export default {
state:{
show:
}
}
export
},mutations:{
SET_DIALOG_STATE:(state,val) => { 改变弹框是否显示的状态
state.show = val
}
}
}
="$store.commit('SET_DIALOG_STATE',true)"
弹框是否显示:{{$store.state.app.show}}
{
}
},1)">>
- mutations中的方法是不分模块的，比如你在app.js中定义了SET_DIALOG_STATE这个方法，也在user.js中定义了SET_DIALOG_STATE这个方法，那么在任一组件中调用SET_DIALOG_STATE方法。
- mutations里的操作必须是同步的。
export return state.show
}
},1)"> val
}
},actions:{
set_dialog_state({commit,state},dialogVal){ 对象解构
commit('SET_DIALOG_STATE'commit('mutations其它方法','其它方法需要改变的值')
}
等价于下面的：
/*
set_dialog_state(context,dialogVal){
context.commit('SET_DIALOG_STATE',dialogVal)
context.commit('mutations其它方法','其它方法需要改变的值')
}
*/
}
}
<template>
<div>
<a href="javascript:;" @click="$store.dispatch('set_dialog_state',true)">点击</a>
<common-dialog></common-dialog>
弹框是否显示:{{$store.state.app.show}}
</div>
</template>
<script>
import commondialog from '@/components/dialog'
export {
name: 'parent'
<template>
<el-dialog :visible.sync="$store.getters.show" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.dispatch('set_dialog_state',false)">取 消</el-button>
<el-button type="primary" @click="$store.dispatch('set_dialog_state',false)">确 定</el-button>
</span>
</el-dialog>
</template>
mapGetters
<template>
<el-dialog :visible.sync="$store.getters.show" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.dispatch('set_dialog_state',false)">确 定</el-button>
</span>
</el-dialog>
</template>
<template>
<el-dialog :visible.sync="show" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.dispatch('set_dialog_state',false)">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
export {
name:'children' {
};
},computed:{
...mapGetters([
'show'
])
}
}
</script>
<template>
<el-dialog :visible.sync="dialogShow" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.dispatch('set_dialog_state',computed:{
...mapGetters({
dialogShow:'show'
})
}
}
</script>
mapState
="show"="$store.dispatch('set_dialog_state',1)">
import { mapState } from vuex=> state.app.show
})
}
}
>
="showState" state.app.show,//方式一 箭头函数
showState(state){ 方式二 常规函数
state.app.show
}
})
}
}
>
mapMutations
="SET_DIALOG_STATE(true)"
import { mapMutations } from SET_DIALOG_STATE])
}
}
>
="changeState(true)"' 改变名字
})
}
}
>
mapActions
="set_dialog_state(true)"
import { mapActions } from set_dialog_state>
服务热线 19970861797
