vue-vuex
读不懂系列：
专业介绍：
Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
总而言之：
Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。
优点：
Vuex状态管理跟使用传统全局变量的不同之处：
1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。
2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。
用处：
（子组件想父组件传值使用prop） （父组件向子组件传值用$emit）
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递；但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。Vue 的状态管理工具 Vuex 完美的解决了这个问题。
小实例：
- 首先在src文件夹下创建一个新的文件夹叫store，在store文件夹下创建一个store.js的文件；
- 在store.js的文件中初始化：
import Vue from 'vue';//导入； import Vuex from 'vuex';//导入； Vue.use(Vuex);//使用； //初始化数据； const state = { testMsg:'这是demo的原始数据', childText:'这是child的原始数据' }; //改变的方法； const mutations = { changeTestMsg(state,str){ state.testMsg=str; }, changeChildText(state,str){ state.childText=str; } } //创建vuex中的store对象，并导出； export default new Vuex.Store({ state:state, mutations:mutations })
- 在父文件下：
<template>
<div>
<div class="head">
<div>demo页面</div>
<div>
<button @click="pchangep">改变demo页面数据</button>
<button @click="pchangec">改变child页面数据</button>
</div>
<div>Test:{{msg}}</div>
</div>
<child></child>
</div>
</template>
<script>
import child from "./child.vue";
import store from "../store/store.js";
export default {
name:"demo2",
store,
data(){
return{
}
},
components:{//组件的显示
child
},
computed:{//获取store.js中的数据
msg(){
return store.state.testMsg;
}
},
methods:{
pchangep(){
store.commit('changeTestMsg','父组件修改自己的文本')
},
pchangec(){
store.commit('changeChildText','父组件子组件的文本')
}
}
}
</script>
<style scoped>
.head {
height: 230px;
background: pink;
line-height: 50px;
}
</style>
- 在子组件中：
<template>
<div class="foot">
<div>这是child组件</div>
<div>
<button @click="cchangec">改变child的数据</button>
<button @click="cchangep">改变demo2的数据</button>
</div>
<div>childText:{{msg}}</div>
</div>
</template>
<script>
import store from "../store/store.js";
export default {
name: "child",
store,
data(){
return{
}
},
methods:{
cchangep(){
store.commit('changeTestMsg','子组件修改父组件的文本')
},
cchangec(){
store.commit('changeChildText','子组件修改自己的文本')
}
},
computed:{
msg(){
return store.state.childText;
}
}
}
</script>
<style scoped>
.foot {
height: 300px;
line-height: 50px;
background: skyblue;
}
</style>
部分原文链接：https://blog.csdn.net/x550392236/article/details/80668263
