手写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中开启了严格模式,则会报错
手写vuex4源码(一)Vuex的基本使用_第1张图片

你可能感兴趣的:(手写vuex4.x源码,vue.js,javascript,前端)