25.一文弄懂vuex.md

1、vuex 概述

---

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

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

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

兄弟组件之间共享数据：EventBus $on 接受数据的那个组件，$emit 发送数据的那个组件

1.2 vuex 是什么

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

说人话就是，通过vuex这个工具，可以实现组件之前的数据共享

​

在没有Vuex的情况下，一旦数据传递规模较大，就需要采取复杂的链式传递

在有vuex的情况下，那个组件需要数据，可以直接在vuex中获取

2.1 Vuex的基本使用

1、安装 vuex 依赖包

npm install vuex --save

2、导入 vuex 包

App.vue

import Vuex from 'vuex'
Vue.use(Vuex)

3、创建 store 对象

store.js

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

4、创建计数器

app.vue

<template>
  <div>
    <h2>计数器</h2>
    <p>-----------------------</p>
    <div>加法</div>
    <Addition></Addition>
    <p>-----------------------</p>
    <div>减法</div>
    <Subtraction></Subtraction>
  </div>
</template>

<script>
import Addition from './components/Addition.vue';
import Subtraction from './components/subtraction.vue';
export default {
  data(){
    return{}
  },
  components:{
    Addition,
    Subtraction
  }
  
};
</script>

预览地址

3.1 vuex 的核心概念

state

• State --------- 唯一公共数据源，所有数据都要存放在 Store 的 State 中

  store/index.js

  const store = new Vuex.Store({
    state:{ count:0 },
  })

  访问 state 中的数据的两种方式

  1. this.$store.state.全局数据名称

     <template>
       <div>
         <h4>加法</h4>
         <h4>当前count的值为：{{$store.state.count}}</h4>
         <button>+1</button>
       </div>
     </template>
     
     <script>
     export default {
     }
     </script> 

     上链接

  2. //1、从 vuex 中按需导入 mapState 函数
     import {mapState} from 'vuex'

     //2、将全局数据，映射为当前组件的计算属性
     computed:{
       ...mapState(['count'])
     }

     <template>
       <div>
         <h4>减法</h4>
         <h4>当前count的值为：{{ count }}</h4>
         <button>-1</button>
       </div>
     </template>
     
     <script>
     import {mapState} from 'vuex'
     export default {
       data() {
         return {}
       },
       computed: {
         ...mapState(['count'])
       }
     }
     </script>
     

     上链接

Mutation

• Mutation ----- 用于变更 Store 中的数据

  • 触发mutations的两种方式

  • 1. this.$store.commit()

    • 只能通过 Mutation 变更 Store 数据，不可以直接操作 Store 中的数据

    • store.js

    • import Vue from "vue";
      import Vuex from 'vuex';
      
      Vue.use(Vuex);
      
      export default new Vuex.Store({
        state:{ count:0 },
      // 定义Mutation 
      +  mutations:{
      +    add(state){
      +      state.count++
      +    }
      +  }
      })

    • //触发mutation
      methods:{
        btnadd(){
          this.$store.commit('add')
        }
      }

      上链接

    • 关于传参

    • export default new Vuex.Store({
        state:{ count:0 },
        mutations:{
          add(state){
            state.count++
          },
      +    addN(state,step){
      +      state.count+=step
      +    },
          sub(state){
            state.count--
          }
        }
      })

    • //传入参数
      btnaddN(){
        //commit 的作用，就是调用某个 mutation 函数  
          this.$store.commit('addN',3)
        }

      上链接

  • 2. //1、从 vuex 中按需导入 mapMutations 函数
       import {mapMutations} from 'vuex'

       methods:{
       ...mapMutation(['add','addN'])
       }

       store.js

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

       subtraction.vue

       methods:{
       +    ...mapMutations(['sub','subN']),
       +    btnsub(){
       +      this.sub()
       +    },
       +    btnsubN(){
       +      this.subN(3)
       +    }
       +  }

       上链接

• Action ---- 用于处理异步任务

  相信你看到这里大概知道呢vuex的套路呢，是的呢

  1. this.$store.dispatch('...')

     上链接

  2. import {mapState, mapMutations, mapActions} from 'vuex'
     methods: {
     	...mapActions(['subAsync', 'subAsyncN'])
     	btnSubAsync() {
     	  this.subAsync()
         },
         btnSubAsyncN() {
           this.subAsyncN(3)
         }
     }

     上链接

• Getter ---- 对state中的数据进行加工处理形成新的数据，类似于 Vue 中的计算属性

  • store中的数据发生变化，getter中的数据也会跟着变化

    上链接