Vuex详解，彻底搞懂Vuex

Vuex

store 创库

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 定义数据
  state: {
    count: 0
  },
  // 只有 mutations 中定义的函数，才有权利修改 state 中的数据
  mutations: {
    add(state) {
      // 不要在 mutations 函数中，执行异步操作
      // setTimeout(() => {
      //   state.count++
      // }, 1000)
      state.count++
    },
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    }
  },
  // 用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
  actions: {
    addAsync(context) {
      setTimeout(() => {
        // 在 actions 中，不能直接修改 state 中的数据；
        // 必须通过 context.commit() 触发某个 mutation 才行
        context.commit('add')
      }, 1000)
    },
    addNAsync(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    },
    subAsync(context) {
      setTimeout(() => {
        context.commit('sub')
      }, 1000)
    },
    subNAsync(context, step) {
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    }
  },
  getters: {
    showNum(state) {
      return '当前最新的数量是【' + state.count + '】'
    }
  }
})

操作vuex 第一种方式

<template>
  <div>
    <h3>当前最新的count值为：{{$store.state.count}}</h3>
    <h3>{{$store.getters.showNum}}</h3>
    <button @click="btnHandler1">+1</button>
    <button @click="btnHandler2">+N</button>
    <button @click="btnHandler3">+1 Async</button>
    <button @click="btnHandler4">+N Async</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnHandler1() {
      this.$store.commit('add')
    },
    btnHandler2() {
      // commit 的作用，就是调用 某个 mutation 函数
      this.$store.commit('addN', 3)
    },
    // 异步地让 count 自增 +1
    btnHandler3() {
      // 这里的 dispatch 函数，专门用来触发 action
      this.$store.dispatch('addAsync')
    },
    btnHandler4() {
      this.$store.dispatch('addNAsync', 5)
    }
  }
}
</script>

操作vuex 第二种方式

<template>
  <div>
    <h3>当前最新的count值为：{{count}}</h3>
    <h3>{{showNum}}</h3>
    <button @click="btnHandler1">-1</button>
    <button @click="subN(3)">-N</button>
    <button @click="subAsync">-1 Async</button>
    <button @click="subNAsync(5)">-N Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  data() {
    return {}
  },
  // 计算属性中使用mapState和mapGetters映射
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync']),
    btnHandler1() {
      this.sub()
    }
  }
}
</script>

全局状态管理

• 定义全局data数据
• 方便组件之间数据共享（不需要组件传值了）

安装配置

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

import store from './store.js'
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

state

全局状态（数据）在该对象中定义

访问方式

• this.$store.state.xxx
• 计算属性中使用mapState扩展
  • ...mapState(['xxx'])

mutations

定义函数，修改state中数据的唯一途径，必须是同步函数，不能有任何异步操作

• 定义

mutations: {
  addN(state, step) {
    state.count = step
  } 
}

• 调用
  • 方式一：this.$store.commit('addN', 5)
  • 方式二：...mapMutations(['addN'])

actions

定义函数，可以是异步函数，不能直接修改state，需要提交mutations

• 定义

actions: {
  addNAsync(context, step) {
    setTimeout(() => {
      context.commit('addN', step)
    }, 1000)
  }
}

• 调用
  • 方式一：this.$store.dispatch('addAsync', 5)
  • 方式二：...mapActions(['addAsync'])

getters

Vuex中的计算属性（全局计算属性）

• 定义

getters: {
  unDoneLength(state) {
    return state.list.filter(x => x.done === false).length
  }
}

• 调用
  • 方式一：this.$store.getters.unDoneLength
  • 方式二：...mapGetters(['unDoneLength'])