当你使用终端命令建立vue项目时候,我们可能需要父组件向孙组件传值,或者非父子组件传值,或子组件向父组件传值的时候,我们可以使用vuex实现,
1:首先建立vue项目:
vue init wepack my-project
cd my-project
npm install
npm run dev(可写可不写)
2:在项目文件夹中安装vuex
npm install vuex
3:而后在main.js中添加如下代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
4:在main.js中添加如下代码:
const store = new Vuex.Store({
state: {
showModal:false
},
mutations: {
}
});
new Vue({
el: '#app',
router,
store,//一定要注意这一步骤
render: h => h(app)
});
5:在vue组件中获取showModal的值,并且更改(请注意:这里边的store相当于一个全局变量,所有的vue文件都可以获取到它,并且更改,)
import addClassPopup from './addClassPopup.vue'
export default{
data(){
return{
msg:'hello vue'
}
},
computed: {
showModal () {
return this.$store.state.showModal;
}
},
methods: {
showPop () {
this.$store.state.showModal = true;
}
},
components:{
addClassPopup
}
}
6:要想实现弹出框的弹出和隐藏,我们只需要在绑定事件中修改showModal的值即可,此种解决办法个人觉得仍有纰漏,需要后续改进