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

Posted 2021-12-09 JackieDYH

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文件 以及一个简单的项目结构

新建完成 打开项目 在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

---

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>