当你使用终端命令建立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的值即可，此种解决办法个人觉得仍有纰漏，需要后续改进
网友评论