vuex中助手函数的几种使用技巧总结

古城微笑少年丶 2022-10-07 06:48 120阅读 0赞

# vuex基本了解安装及初步使用 #

> **首先了解一下vue中组件之间共享数据的方式**  
> 父向子 `v-bind`  
> 子向父 `v-on`  
> 兄弟组件之间 `EventBus`  
> `$on`接收数据的那个组件  
> `$emit`发送数据的那个组件

> **了解vuex**  
> 是实现组件全局状态(数据)管理的一种机制 可以方便的实现组件之间数据的共享  
> 使用vuex统一管理状态的好处  
> 能够在vuex中集中管理共享的数据 易于开发和后期维护  
> 能够高效地实现组件之间的数据共享 提高开发效率  
> 存储在vuex中的数据都是响应式的 能够实时保持数据与页面的同步  
> 什么样的数据适合存储到vuex中  
> 一般情况下 只有组件之间共享的数据 才有必要存储到vuex中 对于组件中的私有数据 依旧存储在组件自身的data中即可

## 安装 ##

npm install vuex --save

## 导入 ##

import Vuex from vuex
    Vue.use(Vuex)

## 创建store对象 ##

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

## 将store对象挂载到vue实例中 ##

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

--------------------

# vuex state的两种使用方式 #

> `state`是提供唯一的公共数据源 所有共享的数据都要统一放到store的state中进行存储

## **组件访问** ##

### state中数据的第一种方式 ###

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

### state中数据的第二种方式 ###

> 通过导入 mapState 函数 将当前组件需要的全局数据 映射为当前组件的 computed 计算属性

// 从 vuex 中按需导入 mapState 函数
     import {mapState} from 'vuex'
     // 将全部数据 映射为当前组件的计算属性
     computed:{
         ...mapState(['count'])
     }

> 在项目初始化的时候安装 vuex 这样项目就会默认有一个store文件 以及一个简单的项目结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70][]

> **新建完成 打开项目 在`store`文件里有一个`index.js`文件**  
> 打开index.js在里面加入一个`count`值

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        count: 0
      },
    })

> **在components文件中新建两个文件**  
> 通过state的两种方式去分别获取count值  
> 第一个文件的代码如下

<template>
      <div>
        <h3>当前最新的count值为: {
       {this.$store.state.count}}</h3>
        <button>+1</button>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {}
      }
    }
    </script>

第二个文件的代码如下

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

> 这两个文件分别通过组件访问的两种方式去获取count的值

> **在`app.vue`文件中引入这两个组件**  
> 引入组件 注册组件 使用组件  
> 再运行项目  
> 在浏览器界面便能看到都获取到 `count`是`0`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 1][]

--------------------

# Mutation的两种使用方式及携带参数 #

> **Mutation用于变更store中的数据**  
> 1 只能通过mutation变更store数据 不可以直接操作store中的数据  
> 2 通过这种方式虽然操作起来稍微繁琐一些 但是可以集中监听所有数据的变化

## `第一种方式 commit` ##

> 在 store/index.js 中定义

// 定义 Mutation
    const store = new Vuex.Store({
        state: {
            count:0
        },
        mutations: {
            sub (state) {
    	      state.count--
    	    }
        }
    })

在使用的页面触发

// 触发mutation
    methods: {
        handleBtnSub(){
            // 触发mutation的第一种方式
            this.$store.commit('sub')
        }
    }

> commit 的作用 就是调用 某个mutation函数

**触发 mutations 时传递参数**

mutations:{
        subN (state, step) {
          state.count -= step
        }
    },
    methods:{
        handleBtnSub(){
            this.$store.commit('subN',3)
        }
    }

## `触发mutation的第二种方式 mapMutations` ##

// 从vuex中按需导入 mapMutations 函数
    import {mapMutations} from 'vuex
    // 通过导入的函数 将需要的mutations函数 映射为当前组件的methods方法
    methods:{
        ...mapMutations(['sub', 'subN']),
        handleBtnSub () {
          this.sub()
        },
        handleBtnSubN () {
          this.subN(3)
        }
    }
    // @click="handleBtnSub"这里相当于另起一个方法调用 也可以直接 @click="sub"

> **不要在 mutations 函数中执行异步操作**

--------------------

# Action的两种使用方式和携带参数 #

> **如果通过异步操作变更数据 必须通过Action 而不能使用Mutation 但是在Action中还是要通过触发Mutation的方式间接变更数据**

## 触发 action 的第一种方式 this.$store.dispatch() ##

> 在`store/index.js`中 使用  
> 这里通过定时器来模拟一个异步任务

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        add (state) {
          state.count++
        }
      },
      actions: {
        // 在 actions 中不能直接修改 state 的数据 必须通过 context.commit() 触发某个 mutation 才行
        addAsync (context) {
          setTimeout(() => {
            context.commit('add')
          }, 1000)
        }
      },
    })

在页面中触发

handleBtnAddAsync () {
      // 这里的 disptach 函数 专门用来触发 action
      this.$store.dispatch('addAsync')
    },
    // @click="handleBtnAddAsync"这里相当于另起一个方法调用 也可以直接 @click="addAsync"

## 触发 action 异步任务携带参数 ##

> 在`store/index.js`中 接收参数

...省略引用
    export default new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        addN (state, step) {
          state.count += step
        }
      },
      actions: {
        addNAsync (context, step) {
          setTimeout(() => {
            context.commit('addN', step)
          }, 1000)
        }
      }
    })

在 页面中触发 传递参数

handleBtnAddAsyncN () {
       this.$store.dispatch('addNAsync', 5)
     }
     // @click="handleBtnAddAsyncN"这里相当于另起一个方法调用 也可以直接 @click="addNAsync(5)"

## 触发 action 的第二种方式 mapActions ##

// 从vuex中按需导入 mapActions 函数
    import {mapActions} from 'vuex'
    // 将指定的 actions 函数 映射为当前组件的 methods 函数
    methods:{
        ...mapActions(['addNAsync']),
        addAsync () {
          this.subAsync()
        }
    }

> **`@click="handleBtnSubAsync"这里相当于另起一个方法调用 也可以直接 @click="addN"`**

--------------------

# Getter的两种使用方式 #

> Getter用于对store中的数据进行加工处理形成新的数据 类似 vue 的计算属性  
> store 中数据发生变化 getter的数据也会跟着变化

...引入省略
    // 定义getter
    state: {
      count: 0
    },
    getters:{
     showNum:state=>{
        return `当前最新的数量是【${state.count}】`
      }
    }

**使用 getters 的第一种方式**

this.$store.getters.名称
    // <h3>{
       {$store.getters.showNum}}</h3>

**使用 getters 的第二种方式**  
在要使用的页面

// 引入
    import {mapGetters} from 'vuex'
    computed: {
        ...mapGetters(['showNum])
    }
    // <h3>{
       {showNum}}</h3>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70]: /images/20221005/dae51ffe739e4c58b024e779cfaf5d1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 1]: /images/20221005/b0fda3695a7c41b1896020a86e8e41a6.png