Vue中使用Vuex的store存储数据

您所在的位置：网站首页 › 前端存取数据 › Vue中使用Vuex的store存储数据

Vue中使用Vuex的store存储数据

2023-08-25 02:56| 来源: 网络整理| 查看: 265

快速导航 Vuex中的 StateVuex中的 MutationVuex中的 ActionVuex中的 Getter

Vuex中的 State

1、State提供唯一的公共数据源，所有的共享的数据都要统一放在Store中的State中进行存储

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

2、组件访问State中数据：

第一种方式this.$store.state.全局数据名称 {{ $store.state.count }} 第二种方式从 vuex中按需导入mapState 函数 // 从 vuex中按需导入mapState 函数 import {mapState} from 'vuex' export default { data(){ return{} }, computed:{ ...mapState(['count']) } }

如何使用 mapState，直接使用

获取全局变量的值： {{ count }} Vuex中的 Mutation

1、Mutation 用于变更Store中的数据

只能通过Mutation 变更Store数据，不可以直接操作Store中的数据通过这种方式可以集中监控所有数据变化

2、如何创建Mutation

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // state 中存放的就是全局共享的数据 state:{ count:0 }, // Mutation 用户变更Store数据 mutations:{ add(state){ state.count++ } } }); export default store

3、如何触发 mutation

使用$store.commit() 触发 export default { name: 'HelloWorld', props: { msg: String }, data(){ return{ HelloString: "Hello world IOT Know You !" } }, methods:{ handelAdd(){ // 触发mutation this.$store.commit('add'); } } } 创建带参数的Mutation import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // state 中存放的就是全局共享的数据 state:{ count:0 }, // Mutation 用户变更Store数据 mutations:{ add(state){ state.count++ }， addN(state , step){ state.count += step } } }); export default store 触发mutation export default { name: 'HelloWorld', props: { msg: String }, data(){ return{ HelloString: "Hello world IOT Know You !" } }, methods:{ handelAdd(){ // 触发mutation this.$store.commit('add'); }, handelAddN(){ // 触发mutation , 带参数 this.$store.commit('addN',3); }, } } 使用mapMutations函数触发 // 1.从Vuex中按需导入mapMutations函数 import { mapMutations } from 'vuex'

导入mapMutations函数后，将需要的mutations函数，映射为当前组件的methods方法

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

完成后，就可以像调组件方法一样直接调用

注意事项在mutations中不可以写异步的方法

下面的写法是不对的

mutations:{ add(state){ setTimeout(() => { state.count ++ } , 1000) } } Vuex中的 Action

1、Action 是专门用于处理异步任务的如需要通过异步操作变更数据，必须通过Action，不可以使用Mutation 使用Action改变数据时，还是会通过触发Mutation的方式间接变更数据

2、使用 $store.dispatch()触发actions 定义Actions

actions:{ addAsync(context){ // 只有mutations中定义的方法才可以修改 state setTimeout(()=>{context.commit('add')},1000) } }

触发Action

methods:{ handle(){ // 使用 $store.dispatch() 触发 this.$store.dispatch('addAsync') } }

定义带参数的Action

actions:{ addAsync(context , step){ // 只有mutations中定义的方法才可以修改 state setTimeout(()=>{context.commit('addN',step)},1000) } }

触发Action

methods:{ handle(){ // 使用 $store.dispatch() 触发 this.$store.dispatch('addAsync') } }

3、使用 mapActions([’’])函数调用Actions

// 从vuex中导入 mapActions 函数 import { mapActions } from 'vuex' // 将需要的actions函数映射到当前的组件 methods:{ ...mapActions(['add','addN']) } Vuex中的 Getter

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

Getter可以对Store中的数据加工处理之后形成新的数据Store中的数据发生变化，Getter中的数据也会发生改变

定义Getter

getters:{ showNum: state => {return 'Store中count的数值是：'+state.count} }

2、调用Getter

使用 $store.getters.名称调用 this.$store.getters.add 按需导入 mapGetters 函数调用 // 按需导入mapGetters import {mapGetters} from 'vuex' computed:{ ...mapGetters(['add']) }

【本文地址】

Vue中使用Vuex的store存储数据

Vue中使用Vuex的store存储数据

今日新闻

推荐新闻