本文已参与「新人创作礼」活动，一起开启掘金创作之路。

state 是自定义的一些变量，需要用来保存数据；

mutations 是用来触发事件，相当于方法，用户需要通过触发这个方法，借此来保存数据；

本篇 github

vuex

src/components/Counter.vue

/**
* Wednesday 2022/11/9 09:52:36
* src/components/Counter.vue
*/
<template>
  <div class="count">
    {{ this.$store.state.count }}
    <button @click="addBtn">add</button>
    <button @click="reduceBtn">reduce</button>
  </div>
</template>
​
<script>
import { mapActions, mapMutations } from 'vuex'
​
export default {
  name: 'Counter',
  computed: {
    doneTodosCount() {
      return this.$store.state.todos.filter( todo => todo.done ).length
    },
  },
  methods: {
    ...mapMutations( [ 'addCount', 'reduceCount' ] ),
    ...mapActions( [ 'asyncReduce' ] ),
    addBtn() {
      this.addCount( 10 )
    },
    // reduceBtn() {
    //   this.reduceCount()
    // },
    // reduceBtn() {
    //   this.asyncReduce()
    // },
    // ======使用 dispatch 触发 Action 函数======
    reduceBtn() {
      this.$store.dispatch( "asyncReduce" )
    },
  },
  // =====commit=====
  // methods: {
  //   addBtn() {
  //     this.$store.commit( 'addCount', 10 )
  //   },
  //   reduceBtn() {
  //     this.$store.commit( 'reduceCount' )
  //   },
  // },
}
</script>
​
<style lang="scss" scoped>
​
</style>
​

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
​
Vue.use( Vuex )
​
export default new Vuex.Store( {
    state: {
        count: 12,
        todos: [
            { id: 1, text: '...', done: true },
            { id: 2, text: '...', done: false },
        ],
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter( todo => todo.done )
        },
    },
    mutations: {
        addCount( state, num ) {
            state.count = +state.count + num
        },
        reduceCount( state ) {
            state.count--
        },
    },
    // 异步操作 mutations，就得使用 Action
    actions: {
        asyncReduce( context ) {
            console.log( 'context', context )
            setTimeout( () => {
                context.commit( 'reduceCount' )
            }, 100 )
        },
    },
    modules: {},
} )

state 数据相当于 data

state 数据

调用方式一、全局调用：this.$store.state.全局数据名称

调用方式二、直接调用：$store.state.count

调用方式三、从 vuex 中按需导入 mapstate 函数（辅助函数）

const store = new Vuex.Store({
  state: {
    count: 0,
    name:'Tom',
    age:12
  },
}

 {{ this.$store.state.count }}  // 全局调用：this.$store.state
 {{ $store.state.count }}  // 直接调用：$store.state
 computed: {
    ...mapState(['name','age']), // mapstate 辅助函数
    }

getters 缓存

没看懂，先不写。

mutations 方法

调用方式一、使用 commit 触发 mutation 操作

<button @click="addBtn">add</button>
<button @click="reduceBtn">reduce</button>

 // =====commit=====
  methods: {
    addBtn() {
       this.$store.commit( 'addCount', 10 )
    },
    reduceBtn() {
       this.$store.commit( 'reduceCount' )
    },
  },

调用方式二、使用 mapMutations 辅助函数进行操作，具体方法同上 mapstate

   methods:{
        ...mapMutations( [ 'addCount', 'reduceCount' ] ),
        addBtn() {
            this.addCount( 10 )
        },
        reduceBtn() {
            this.reduceCount()
        },
    }

mutations: {
        addCount( state, num ) {
            state.count = +state.count + num
        },
        reduceCount( state ) {
            state.count--
        },
    },

actions 异步

异步操作 mutations，就得使用 actions 。

调用方式一、直接使用 dispatch 触发 action 函数

// 将减法改为异步操作
    actions: {
        asyncReduce( context ) {
            console.log( 'context', context )
            setTimeout( () => {
                context.commit( 'reduceCount' )
            }, 100 )
        },
    },

methods:{
    // ======使用 dispatch 触发 action 函数======
    reduceBtn() {
      this.$store.dispatch( "asyncReduce" ) // dispatch 后面跟 actions 里的方法名
    },
}

调用方式二、使用辅助函数

 methods: {
    ...mapActions( [ 'asyncReduce' ] ),
    reduceBtn() {
      this.asyncReduce()
    },
 }

后记：Vuex 第二天。