持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
咱们按照正常流程写一个vuex的调用，然后再用自己写的vuex替换掉官方引用的vuex，如果能用就可以了
首先我们需要在vue3的项目上使用官方的vuex，是简单加法的功能，也比较简单可以简单看下代码
store.js
// 使用方式和vue2.0的vuex使用方式一样的
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0,
},
mutations: {
plus(state,num) {
state.count+=num
}
},
actions: {
plus({ commit, state },num) {
setTimeout(() => {
commit('plus',num)
}, 1000);
}
},
modules: {
}
})
在main.js上需要use一下
// 这里就就简单写下没有直接复制vue3的main.js
app.use(store).use(router).mount('#app') // 一般使用vue3脚手架都是有这些
test.vue
<template>
<div>
vuex 测试用
<h1>{{ store.state.count }}</h1>
<button @click="mutationsP(1)">mutation+</button>
<button @click="actionsp(2)">actions+</button>
</div>
</template>
<script>
import { useStore } from 'vuex' //在页面使用上有区别 vue2.0把store直接挂载到了vue的原型上
export default {
// 咱们这里主要是做一个vuex的累加器
setup() {
let store = useStore()
console.log(store)
return {
store,
mutationsP(num){
store.commit('plus',num)
},
actionsp(num) {
store.dispatch('plus',num)
}
}
}
}
上面是一个vue3的vuex的一个简单应用，现在开始写vue3的vuex的功能了 可以先看一下我在官网截的vuex的工作流程图
调用流程简单说下，vue组件用dispatch调用Actions(Actions里可能会有异步方法)在使用commit调用Mutations(使用还有一个好处方便用插件追踪数据)改变State，由于state和vue组件是绑定关系，所以state改变 视图也会改变 (我们也可以不使用dispatch)直接用commit也是可以的，但是必须是commit的是同步的不能是异步
。
state想改变视图，就必须保证他是响应式数据，在vue3中就比较简单了可以用reactive绑定就可以了，
我们把vuex的逻辑分析清楚了，自己实现起来就比较清晰了，我们会在一下篇去实现，敬请期待
