手写 Vuex4.x 核心（Vuex源码实现）

通过 vuex 实现 TodoList ：

我们先做一个小的 TodoList 的案例，应用 vuex 来实现，然后逻辑跑通之后再在此的基础上我们一点点手写自己的 vuex ，进而实现和原来一样的效果。

采用 vite 创建项目：

yarn create vite vuex-core-dev --template vue

安装vuex：

yarn add vuex@next --save

删掉 hellowolrd.vue，在 src 目录下新建 store 文件夹，完善 vuex 结构：

在 main.js 中引入：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store'
 
createApp(App).use(store).mount('#app')

我们在 store 目录下的 index.js 中返回的对象，里面一定包含一个 install(app)。这是根据 vue 的 plugin 来决定的，你用 use 了就一定得对应 install。只不过这是 vuex 内部已经帮我们实现好的，但是在我们自己的 vuex 中要注意，如果在 main.js 中 sue了，那我们必须在返回的对象中包含 install。

根据 TodoList 的逻辑，我们来编写 vuex 的实现：

state.js：

export default {
    todos: [],
    filter: 'all', //all finished unfinished
    id: 0
}

在 state 中 todos 存储着所有信息，filter 则是当前整体的 TodoList 处于什么状态，是 all 的话就显示所有 list，是 finished 就显示全部已完成的 list，unfinished 就显示全部未完成的 list。并且每条 list 都有对应的 id。

actions.js：

export default {
    addTodo ({ commit }, text) {
        commit('addTodo', text)
    },
    toggleTodo ({ commit }, id) {
        commit('toggleTodo', id)
    },
    removeTodo ({ commit }, id) {
        commit('removeTodo', id)
    }
}

这应该不难理解，就是通过 actions 来提交指定的 mutation 进而改变 state 中的数据将。

mutations.js：

export default {
    addTodo (state, text) {
        state.todos.push({
            id: state.id++,
            text,
            isFinished: false
        })
    },
    toggleTodo (state, id) {
        state.todos = state.todos.map(item => {
            if (item.id === id) {
                item.isFinished = !item.isFinished
            }
            return item
        })
    },
    removeTodo (state, id) {
        state.todos = state.todos.filter(item => {
            if (item.id !== id) {
                return true
            }
        })
    },
    setFilter (state, filter) {
        state.filter = filter
    }
}

getters.js：

export default {
    finishedTodos (state) {
        return state.todos.filter(todos => todos.isFinished)
    },
    unfinishedTodos (state) {
        return state.todos.filter(todos => !todos.isFinished)
    },
    filteredTodos (state, getters) {
        switch (state.filter) {
            case 'finished':
                return getters.finishedTodos
            case 'unfinished':
                return getters.unfinishedTodos  
            default:
                return state.todos     
        }
    }
}

getters 就类似于计算属性，我们在 getters 中通过 filteredTodos 来根据当前状态筛选数据。

最后在 index.js 中我们把这些传入一个对象再导出出去：

import state from "./state";
import getters from "./getters";
import mutations from "./mutations";
import actions from "./actions";
 
import { createStore } from 'vuex'
 
export default createStore ({
    state,
    getters,
    mutations,
    actions
})

重点：

因为我们要实现自己的 vuex 。所以我们要非常清楚我们提交的 mutation ，派发的 action 和 vuex 中的 actions，mutations 他们的参数都是什么

提交 mutation 派发 action

mutations -> commit(type, payload) type就是 mutaion 的名字

actions -> dispatch(type, payload)

执行 actions

action -> (store, payload)

执行 mutations

mutation -> (state, payload)

编写 TodoList 视图：

在 components 目录下新建 TodoList 文件夹，创建 Form.vue，index.vue，Tab.vue，Todos.vue。分别别编写这四个组件的内容：

Form.vue：

 
<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
    export default {
        setup () {
            const store = useStore()
            const inputRef = ref('')
        
            const addTodo = () => {
                store.dispatch('addTodo', inputRef.value)
                inputRef.value = ''
            }
            return {
                inputRef,
                addTodo
            }
        }
        
    }
script>
 
<style lang="scss" scoped>
 
style>

Tab.vue：

 
<script>
import { useStore } from 'vuex'
    export default {
        setup () {
            const store  = useStore()
 
            const setFilter = (filter) => {
                store.commit('setFilter',filter)
            }
            return {
                store,
                setFilter
            }
        }
    }
script>
 
<style lang="scss" scoped>
    a {
        margin-right:15px;
    }
    .active {
        text-decoration: none;
        color: #000;
    }
style>

Todos.vue：