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

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