vue3.0使用VUEX的方法

先在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('changeGoods',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}
  },
};