手写vuex4源码（一）Vuex的基本使用

vuex4官方文档

一、创建vuex源码项目

1、脚手架

使用 vue-cli 创建 vue3.x 脚手架

vue create vuex-lessons

2、脚手架配置

选择babel、vuex

二、vuex的基本使用介绍

1、核心概念

在 vuex 官方文档中，核心概念共有以下五个：

• State：状态，可以理解为 vue 组件中的 data 数据；
• Getter：可以理解为 vue 中的 computed 计算属性；
• Mutation：同步函数，可以同步更改状态；
• Action：异步函数，可以执行异步操作，配合 Mutation 实现状态的异步更新；
• Module： vuex 的模块化，能够将臃肿复杂的 store 容器进行模块化分割，每个模块拥有独立的 state、mutation、action、getter；

2、插件配置

在main.js中将store挂载到vue实例上

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

store/index.js

import { createStore } from 'vuex'

export default createStore({
  // strict:true,
  state: { //组件中的data
    count: 0
  },
  getters: {
    // 计算属性  vuex4并没有实现计算属性的功能
    double(state) {
      return state.count * 2
    }
  },
  mutations: {//同步更改状态
    add(state, payload) {
      state.count += payload
    }
  },
  actions: {//可以调用其他action和mutation
    asyncAdd({commit},payload) { 
      setTimeout(()=>{
        commit('add',payload)
      },1000)
    }
  },
  modules: {
  }
  // 严格模式 不建议直接使用action修改
  // dispatch(action) => commit(mutation) =>修改状态
})

3、基本使用

 {{ count }}
  -------------------
  {{ double }}
  <!-- 可以实现，如果开启了严格模式，就会报错 -->
  <button @click="$store.state.count++">错误修改</button>
  <!-- 同步修改 -->
  <button @click="add">同步修改</button>
  <button @click="asyncAdd">异步修改</button>

import { computed } from 'vue'
import { useStore } from 'vuex';
setup() {  // vue3有个compositionApi的入口
    const store = useStore();
    function add() {
      store.commit('add', 1)
    }
    function asyncAdd(){
      store.dispatch('asyncAdd',1)
    }
    return {
      count: computed(() => store.state.count),
      double: computed(() => store.getters.double),
      add,
      asyncAdd
    }
  }

在错误修改例子中，如果在store/index,js中开启了严格模式，则会报错