vue3 store用法
先在src目录下新建store文件夹并在其下面新建index.js
一 、useStore()
1. state
state是用来定义数据,这里可以设置数据的默认数据,但是为了数据的安全性,通常不直接修改state数据,而是通过mutations修改,修改方法下面会介绍
import { useStore } from "vuex"; export default { setup() { const store = useStore(); console.log(store.state.goods); }, };
2.getters
getters用来处理数据,对state中的数据进行处理,得到自己想要的效果,当需要在多处组件使用这种数据时,gettters是你最好的选择
import { useStore } from "vuex"; export default { setup() { const store = useStore(); console.log(store.getters['goodsData']); }, };
3. mutations
mutations通常为修改state数据而使用,这用就可以避免直接修改state的数据
import { useStore } from "vuex"; export default { setup() { const store = useStore(); store.commit('cahngeGoods',123) }, };
4.actions
actions当你的数据是需要发送请求获取时,这是非常完美的选择
import { useStore } from "vuex"; export default { setup() { const store = useStore(); async function abc() { await store.dispatch("setGoods", { id: 123, }); } return {abc} }, };