Vue系列二十六：vuex-案例

红太狼 2022-01-30 11:51 270阅读 0赞

1、映射 store。main.js

import Vue from 'vue'
    import App from './components/App.vue'
    import store from './store'
    
    new Vue({
      el: '#app',
      render: h => h(App),  //渲染函数
      store
    })

2、状态对象。state.js

//状态对象
    const state = {//初始化状态
      count: 0
    }

3、包含多个由action触发直接更新状态的方法的对象。mutations.js

//包含多个更新state函数的对象
    const mutations = {
      //增加的mutation
      INCREMENT(state){
        state.count++
      },
      //减少的mutation
      DECREMENT(state){
        state.count--
      },
    }

4、包含多个对应事件回调函数的对象。actions.js

//包含多个对应事件回调函数的对象
    const actions = {
      //增加的action
      increment({commit}){
        //提交增加的mutation
        commit('INCREMENT')
      },
      //减少的action
      decrement({commit}){
        //提交减少的mutation
        commit('DECREMENT')
      },
      //带条件的action
      incrementIfOdd({commit,state}){
        if(state.count%2===1){
          //提交增加的mutation
          commit('INCREMENT')
        }
      },
      //异步的action
      incrementAsync({commit}){
        //在action中直接就可以执行异步代码
        setTimeout(() => {
          //提交增加的mutation
          commit('INCREMENT')
        },1000)
      }
    }

5、包含多个getter计算属性函数的对象。getters.js

//包含多个getter计算属性函数的对象
    const getters = {
      evenOrOdd(state){ //不需要调用，只需要读取属性值
        return state.count%2===0?'偶数':'奇数'
      }
    }

6、vuex最核心的管理对象store。index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import mutations from './mutations'
    import actions from './actions'
    import getters from './getters'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state,
      mutations,
      actions,
      getters
    })

在组件中使用。 `...mapActions([ '你要获取的actions名字' ])`，你传入什么，就会返回一个包含对应的actions的对象，通过`...`对象扩展运算符，将返回值解析就成为methods的属性，和平常的方法一样调用即可。

<template>
      <div>
        <p>click {
       {count}} times,count is {
       {evenOrOdd}}</p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementIfOdd">increment if odd</button>
        <button @click="incrementAsync">increment async</button>
      </div>
    </template>
    
    <script>
      import {mapState,mapGetters,mapActions} from 'vuex'
    
      export default {
        computed:{
          ...mapState(['count']),//mapGetters()返回值对象：{count(){return this.$store.state['count']}}
          ...mapGetters({evenOrOdd: 'evenOrOdd2'}),//mapGetters()返回值对象：{evenOrOdd(){return this.$store.getters['evenOrOdd']}}
        },
        methods:{
          ...mapActions(['increment','decrement','incrementIfOdd','incrementAsync'])
        }
      }
    </script>