这篇文章技术含量不是很高（属于比较水），需要自取。
说明：vue3项目越做越大，导致数据管理比较复杂，针对这一情况我们推荐使用各个模块分开管理（用户的信息就用用户模块，首页的数据就用首页模块管理，......）
推荐直接看网站(vuex看这个也可以)
先看目录
模块说明：
// store index.js
配置store具体的创建和actions、mutations功能的引入
// store actions .js
使用具体的dispatch触发的功能
// store mutations
接收actions传递过来的数据，并修改state
// store type.js
配置公共的action类型，统一配置，减少出错
// store module/*
不同的模块存放不同的state
store type.js
export default { // 这个里边也可以使用模块对象管理，根据业务可以自由选择
ADD: "ADD",
GOODSID: "GOODSID",
}
store index.js
import { createStore } from 'vuex'import actions from "./actions";
import mutations from "./mutations";
import moduleUser from './user/user'
import moduleGoods from "./goods/goods";
const store = createStore({
actions,
mutations,
modules: {
user: moduleUser,
goods: moduleGoods
}})
export default store
store actions.js
import type from './type'
export default {
Add ({commit}, payload) {
commit(type.ADD, payload)
},
setGoodsId ({commit}, payload) {
commit(type.GOODSID, payload)
},
}
store mutations.js
import type from './type'
export default {
[type.ADD](state, payload){
state.user.number = payload
},
[type.GOODSID](state, payload){
state.goods.goodsId = payload
},
}
store/user/user.js
const moduleUser = {
state () {
return {
userId: 0
}
}
}
export default moduleUser
store/goods/goods.js
const moduleGoods = {
state () {
return {
goodsId: 12
}
}
}
export default moduleGoods
main.js配置store全局使用
// 需要修改默认的代码
import { createApp } from 'vue'
// import router from "./routers";
import App from './App.vue'
import store from "./store";
const app = createApp(App)
// app.use(router)
app.use(store)
app.mount('#app')
view/RenderFunction.vue
<template>
<div>
<h2>RenderFunction--{{$store.state.user.userId}}</h2>
<h2>RenderFunction--{{$store.state.goods.goodsId}}</h2>
<button @click="Add">add</button>
</div>
</template>
<script setup>
import { useStore } from 'vuex'
const store = useStore() // 使用useStore获取store
const Add = () => {
console.log(store)
store.dispatch('Add', Math.random())
store.dispatch('setGoodsId', Math.floor(Math.random() * 100000))
}
</script>
<style scoped>
</style>
