vuex 核心概念 state、mutations、actions、getters

核心概念

  • state
  • mutations
  • actions
  • modules

手动引入vuex

如果在vue脚手架中没有引入vuex需要进行手动配置。

在main.js中添加如下代码:

import store from 'vuex'

// 在创建vue实例时,将store挂载进去
new Vue({
  render: h => h(App),
  store
}).$mount('#app') 

state

state中设置数据源,页面中所有在vuex中存放的数据都要放到store的state中进行存储。

export default new Vuex.Store({
  state: {
    number: 0
  }
})

访问state中数据的两种方法

  • 通过vue对象进行访问:this.$store.state.number

  • 第二种方式:

    • 在组件中导入mapState函数

    • 组件中可以使用mapState函数将需要的数据映射为计算属性

    • 示例:

// 在需要使用数据的组件中导入该函数
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  components: {
    'my-add': add,
    'my-sub': sub
  },
  // 设置为计算属性
  computed: {
    ...mapState(['number'])
  }~~
~~} 
这样可以直接通过插值表达式访问number属性

mutations

mutations用于对store中的数据进行变更。

需要注意的是,只能通过mutations中的函数来变更数据,不能在组件中直接对数据进行更改。

在mutations中定义函数:

mutations: {
  add (state) {
    state.number++
  },
  sub (state) {
    state.number--
  }
},

在组件中调用函数需要通过this.$store.commit方法:

methods: {
  addOne () {
    this.$store.commit('add')
    console.log('当前值为' + this.$store.state.number)
  }
}

调用时传递参数

mutations对象中的函数是可以传递参数的,如果要传递参数至少需要2个形参,第一个位置的形参必须为state,从第二个形参开始才是要接受的参数。

在使用commit调用mutations里的函数时。第一个实参为要触发的函数(String类型),第二个实参才是要传递的参数。

如下代码所示:

在vuex中定义:

export default new Vuex.Store({
  state: {
    number: 0
  },
  mutations: {
    add (state) {
      state.number++
    },
    sub (state) {
      state.number--
    },
    // 第一个参数传递state
    addN (state, num) {
      state.number += num
    }
  }
})

在组件中调用:

methods: {
  addN () {
    this.$store.commit('addN', parseInt(this.addNumber))
    console.log('当前值为' + this.$store.state.number)
  }
}

this.addNumber为双向数据绑定的input值

触发函数的另一种方式

在组件中导入mapMutations函数:

import { mapMutations } from 'vuex'

将需要的函数映射为当前组件中的methods:

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

这样可以通过this来调用导入的addN,使用这种方式导入的函数无需传递第一个参数如下代码所示:

<template>
  <div>
    <input type="text" v-model="addNumber">
    <button @click='addMore'>加N</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'

export default {
  data () {
    return {
      addNumber: 0
    }
  },
  methods: {
    addMore () {
      // 如果不涉及类型转换可以直接在@click=调用
      this.addN(parseInt(this.addNumber))
    },
    // 导入addN
    ...mapMutations(['addN'])
  }
}
</script>
<style lang="css"></style>

不可以在mutations中处理异步代码

actions

在mutations中不要执行异步操作,应该通过Action来处理异步操作。

在vue的开发工具中:如果是同步代码,开发工具可以捕获到值的变换;但是如果是异步代码,页面中的值虽然变化了,但是开发工具不能够捕捉。如下图所示:
在这里插入图片描述
在这里插入图片描述

在actions中定义异步代码

异步代码在actions中执行,但是仍然需要使用commit去调用mutations的函数将数据进行更改。如下代码所示:

actions: {
  // actions中的异步代码必须声明一个context参数,用来调用mutations中的函数
  asyncAddOne (context) {
    setTimeout(() => {
      // 实质上还是通过调用add方法进行+1
      context.commit('add')
    }, 1000)
  }
}

这样在vuex中异步+1的函数写好了,如果要触发actions中的函数需要下面操作。

触发actions中的异步函数

触发actions中的异步函数有两种方法。

通过vue对象触发

通过dispatch调用actions中的异步代码,如下代码所示:

<template>
  <div>
    <button @click='asyncAddOne'>延迟一秒+1</button>
  </div>
</template>

<script>
export default {
  methods: {
    asyncAddOne () {
      this.$store.dispatch('asyncAddOne')
    }
  }
}
</script>

在这里插入图片描述
千万不可以使用actions中的函数直接改变值,只能调用mutations中的函数,使mutations中的函数协助操作值

通过mapActions导入函数

与mapMutations的使用是一样的

getters

getters用来对state中获取的数据进行加工,但是不会更改state中的数据。

使用方法:

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  // 与state等同级
  getters: {}
})

在getters中声明一个函数,函数中包含要获取的值和对值进行的加工。如下代码所示:

getters: {
  showNumber(state) {
    return `当前number值为:${state.number}`
  }
}

调用getters中定义的函数,见下文

调用getters中的函数

仍然是两种方式:vue对象、挂载到计算属性

vue对象方式

this.$store.getters.showNumber

mapGetters方式

  • 导入mapGetters函数
import { mapGetters } from 'vuex' 
  • 挂载到计算属性
computed: {
  ...mapGetters(['showNumber'])
} 
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页