跨层级传值 -Vuex

原因：

vue中是单向数据流（组件与组件之间的数据传递只能是单向一层一层的进行传值）那么在多层级传值的时候如果我们一层一层的传值 非常麻烦
单向数据流：Vue 的特性单向数据流，指数据一般从父组件传到子组件,子组件没有权利直接修改。（如果要修改子组件的数据1.请求父组件修改数据再传给子组件，父组件属性值的更新会下行流动到子组件中；2.把从父组件拿到的数据存在子组件的data中之后再修改）

定义：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

使用

1.State

定义：State 是 Vuex 的核心，存储了应用中所有组件的状态。
用法：在 Vuex store 中定义 state 对象，组件可以通过 this.$store.state.xxx 访问 state 中的数据。

import Vue from 'vue'
  import Vuex from 'vuex'

  Vue.use(Vuex)

  export default new Vuex.Store({
   
  state: {
   //就是数据源  存放数据的地方
  text:"我是字符串",
  num:18,
  bool:true,
  arr:[1111,2222,3333],
  obj:{
   
  name:"xixi",
  age:18
  }
  },
  getters: {
   
  },
  mutations: {
   
  },
  actions: {
   
  },
  modules: {
   
  }
  })

2. Getter

定义：Getter 类似于 Vue 组件中的计算属性，用于从 state 中派生出一些状态。
用法：在 store 中定义 getter 函数，组件可以通过 this.$store.getters.xxx 访问 getter 的计算结果。

getters: {
   
        // state就是上面的数据源
        newtext(state){
   
            return state.text.toUpperCase()
        }
    },

3. Mutation

定义：Mutation 是更改 Vuex store 中 state 的唯一方法，必须是同步函数。
用法：mutations是一个属性 这个属性中包含的是一个个修改的函数 mutaitons想使用 那么我们需要在组件中使用commit（）来进行调用

let aboutm={
   
  state: {
   //就是数据源  存放数据的地方
  text:"我是字符串",
  bool:true,

  },
  getters: {
   
  },
  mutations: {
   
  我是修改函数1(){
   

  },
  我是修改函数1(){
   

  },
  我是修改函数1(){
   

  },
  我是修改函数1(){
   

  },
  我是修改函数1(){
   

  },
  }