vuex组件之间共享数据的方式

• 父向子传值:v-bind 属性绑定

• 子向父传值:v-on 事件绑定

• $on 接收数据的那个组件

• $emit 发送数据的那个组件

• 其他的传值方式:

• ref 获取dom元素还有组件

• $children获取子组件集合

• $parent获取父组件

• 路由参数--组件传值

1.Vuex概述

1 1.Vuex概述

• Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享

1.2 使用Vuex管理数据的好处：

• 能够在vuex中集中管理共享的数据，便于开发和后期进行维护

• 能够高效的实现组件之间的数据共享，提高开发效率

• 存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

1.3 什么样的数据适合存储到 Vuex 中

一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中;对于组件中的私有数据，依旧存储在组件 自身的 data 中即可。

vuex中通常会保存哪些数据？ 网站的名称，用户信息，token,商品数量等等。

2. Vuex 的基本使用

安装 | Vuex

1. 安装 vuex 依赖包

npm instaall vuex --save

2. 导入 vuex 包

// import store from './store' 已经给你引入ok了
import Vuex from 'vuex'
Vue.use(Vuex)

3. 创建 store 对象

const store = new Vuex.Store({
// state 中存放的就是全局共享的数据 
state: { count: 0 }
})

4. 将 store 对象挂载到 vue 实例中

new Vue({
el: '#app',
render: h => h(app),
router,
// 将创建的共享数据对象，挂载到 Vue 实例中
// 所有的组件，就可以直接从 store 中获取全局的数据了 
store
})

5. 创建带有vuex的vue项目，打开终端，输入命令：vue ui

3.使用Vuex完成计数器案例

6.1打开刚刚创建的vuex项目，找到src目录中的App.vue组件，将代码重新编写如下：

<template>
  <div>
    <my-addition></my-addition>

    <p>----------------------------------------</p>

    <my-subtraction></my-subtraction>
  </div>
</template>

<script>
import Addition from './components/Addition.vue'
import Subtraction from './components/Subtraction.vue'

export default {
  data() {
    return {}
  },
  components: {
    'my-subtraction': Subtraction,
    'my-addition': Addition
  }
}
</script>

<style>
</style>

6.2在components文件夹中创建Addition.vue组件，代码如下：

<template>
    <div>
        <h3>当前最新的count值为：</h3>
        <button>+n</button>
    </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style>
</style>

6.3在components文件夹中创建Subtraction.vue组件，代码如下：

<template>
    <div>
        <h3>当前最新的count值为：</h3>
        <button>-n</button>
    </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style>
</style>

4.Vuex中的核心特性

4.1 Vuex 中主要核心:

• State，控制所有的共享数据

• Mutation，只能在Mutation中修改State中的数据

• Action，执行异步操作

• Getter，用于对Store中的数据进行加工处理形成新的数据

4.2.State

• State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储

例如，打开项目中的store.js文件，在State对象中可以添加我们要共享的数据，如：count:0

// 创建store数据源，提供唯一公共数据 
const store = new Vuex.Store({
      state: {
        count: 0 
      }
})

在组件中访问State的方式：2种

在组件中访问State的方式：
1).this.$store.state.全局数据名称  如：this.$store.state.count
 <h3>当前最新的count值为：{{this.$store.state.count}}</h3>


2).先按需导入mapState函数： import { mapState } from 'vuex'
   然后数据映射为计算属性： computed:{ ...mapState(['全局数据名称']) }

<template>
    <div>
        <h3>当前最新的count值为：{{count}}</h3>
        <button>-n</button>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    //扩展运算符
    ...mapState(['count'])
  }
}
</script>

4.3.Mutation

• Mutation用于修改变更$store中的数据

1 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。 2 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

使用方式： 打开store.js文件，在mutations中添加代码如下

mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$store对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

然后在Addition.vue中给按钮添加事件代码如下：

<button @click="Add">+n</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
     //固定触发mutations中的方法
    this.$store.commit('add',10)
  }
}

使用mutations的第二种方式：

mutations: {
    add(state, step) {
      state.count += step
    },
    sub(state, step) {
      state.count -= step
    }
  },

在Subtraction.vue组件中

import { mapMutations } from 'vuex'

methods:{
  ...mapMutations(['sub'])
}

如下：

<button @click="Sub">-n</button>

import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

4.4.Action

• 在mutations中不能编写异步的代码，会导致vue调试器的显示出错。

• 在vuex中我们可以使用Action来执行异步操作。

• 如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。操作步骤如下： 打开store.js文件，修改Action，如下：

• //mutations只能处理同步任务，比如定时器,ajax,异步任务就一定不可以去操作mutations
    //actions 是专门处理异步任务的，但是没有权限修改store中的数据。
    // 那就在actions中调用mutations中的方法，间接去修改state中的数据
    //这里的context就是store对象
    actions: {
      addAsync(context, step) {
        // 在action中不能直接修改state中的数据，
        // 必须通过context.commit()触发某个mutation才行
        context.commit('add', step);
      }
    }, 
      
    actions: {
      addAsync(context, step) {
        setInterval(() => {
             context.commit('add', step);
        },1000)
      }

  然后在Addition.vue中给按钮添加事件代码如下：

•  <button @click="AddAsync(10)">+10</button>
  
  methods: {
       AddAsync(n) {
           //固定触发action中的异步方法
        this.$store.dispatch("addAsync", n);
      },
   }    

  在Subtraction.vue组件中

• import { mapActions } from 'vuex'
  
  methods:{
     ...mapActions(["subAsync"]),
      SubAsync(n) {
        this.subAsync(n);
      },
  }

  4.5.Getters

• Getter用于对Store中的数据进行加工处理形成新的数据

• 它只会包装Store中保存的数据，并不会修改Store中保存的数据，

• 当Store中的数据发生变化时，Getter生成的内容也会随之变化 打开store.js文件，添加getters，如下：

• export default new Vuex.Store({
    .......
    getters:{
      //添加了一个showNum的属性
      showCount(state) {
        return '最新的count值为：' + state.count
      }
    }
  })

  第一种方式

  然后打开Addition.vue中，添加插值表达式使用getters

•  <h3>{{$store.getters.showCount}}</h3>

• 第二种方式

• <h5>{{ showCount }}</h5>
  
  在Subtraction.vue，导入mapGetters，并将之映射为计算属性
  import { mapGetters } from 'vuex'
  
  computed:{			
    ...mapGetters(['showNum'])
  }

  4.6总结

• 修改state状态必须通过mutations

• mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行

• 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成

• state的状态即共享数据可以在组件中引用

• 组件中可以调用action