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
})

• 在父文件下：

• 在子组件中：

 

部分原文链接：https://blog.csdn.net/x550392236/article/details/80668263

部分原文链接：https://segmentfault.com/a/1190000012881956