一、vuex 安装配置

1. 安装

npm install vuex -S

2. 在 main.js 中挂载 store

import store from "./store";
const app = createApp(App);
app.use(store);

3. 注意事项

修改 state 只能通过 commit 一个 mutation 的方式
1. 同步修改state：只能通过 commit 一个 mutation 的方式来修改 state 状态，不可直接改变
2. 异步修改state：只能通过 dispatch 一个 action 的方式，然后在 action 中 commit 一个 mutation，来修改 state 状态，不可直接改变
3. 无法在 mutation 中异步修改state的原因是：在 mutation 中无法 commit 一个 mutation，只有在 action 中才可 commit 一个 mutation
4. 在vue3中的vuex中的store中的state是响应式的数据，可通过响应式解构的方式使用

二、vuex 简单使用

1. 创建 src\store\index.js 配置文件

import { createStore } from "vuex";
const state = {
  a: 1,
};

const getters = {
  ga: (state) => {
    return state.a * 2;
  },
  gga: (state, getters) => {
    return state.a * 2 + getters.ga;
  },
};

const mutations = {
  SYNCA: (state, params) => {
    state.a = params;
  },
};

const actions = {
  ASYNCA: async ({ state, commit, dispatch, getters }, params) => {
    console.log(state);
    console.log(commit);
    console.log(dispatch);
    console.log(getters);
    console.log(params);

    // 模拟异步请求数据
    const data = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          params ? resolve(params + 1000) : reject(0);
        }, 2000);
      });
    };
    const getData = await data();

    // 获取到数据后 commit 一个 SYNCA 来修改state
    commit("SYNCA", getData);

    // 如果有部分数据没有在store的state中定义，但是需要在组件中使用，也可以通过返回 promise 的方式异步处理
    // return getData;
  },
};

export default createStore({
  state,
  getters,
  mutations,
  actions,
  modules: {},
});

2. 在组件中使用

可以直接在 template模板中使用 $store，但是无法在 setup 函数中使用 this.$store （不推荐），建议通过 const store = useStore(); 方式使用，可以同时在 setup 和 template 中使用

<template>
  <div>{{ store.state.a }}</div>
  <div>{{ store.getters.ga }}</div>
  <button @click="setSYNCA">setSYNCA + 2</button>
  <button @click="setASYNCA">setASYNCA + 1000</button>
</template>

<script>
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();

    // 同步修改state
    function setSYNCA() {
      store.commit("SYNCA", store.state.a + 2);
    }

    // 异步修改state
    function setASYNCA() {
      store.dispatch("ASYNCA", 1);

      // 如果在 action 中，返回了一个 promise 数据，可以使用链式的方式获取数据
      // store.dispatch("ASYNCA", 1).then((res) => console.log(res)).catch((err) => console.log(err));
    }
    return { store, setSYNCA, setASYNCA };
  },
};
</script>

三、vuex 模块化使用

1. 创建 src\store\index.js 主配置文件

import { createStore } from "vuex";
import aaa from "./aaa";
import bbb from "./bbb";
export default createStore({
  modules: {
    aaa,
    bbb,
  },
});

2. 创建 src\store\aaa.js 模块配置文件

const state = {
  a: 1,
};
const getters = {
  ga: (state) => {
    return state.a * 2;
  },
  gga: (state, getters) => {
    return state.a * 2 + getters.ga;
  },
};
const mutations = {
  SYNCA: (state, params) => {
    state.a = params;
  },
};
const actions = {
  ASYNCA: async ({ state, commit, dispatch, getters }, params) => {
    console.log(state);
    console.log(commit);
    console.log(dispatch);
    console.log(getters);
    console.log(params);

    // 模拟异步请求数据
    const data = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          params ? resolve(params + 1000) : reject(0);
        }, 2000);
      });
    };
    const getData = await data();

    // 获取到数据后 commit 一个 SYNCA 来修改state
    commit("SYNCA", getData);

    // 如果有部分数据没有在store的state中定义，但是需要在组件中使用，也可以通过返回 promise 的方式异步处理
    // return getData;
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
};

3. 在组件中使用

子模块state里的属性调用 ：store.state.模块名.属性名
子模块getters里的属性调用 ：store.getters['模块名/属性名']
子模块mutions里的方法调用 ：store.commit('模块名/方法名', '参数')
子模块actions里的方法调用 ：store.dispatch('模块名/方法名', '参数')

<template>
  <div>{{ store.state.aaa.a }}</div>
  <div>{{ store.getters["aaa/ga"] }}</div>
  <button @click="setSYNCA">setSYNCA + 2</button>
  <button @click="setASYNCA">setASYNCA + 1000</button>
</template>

<script>
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();

    // 同步修改state
    function setSYNCA() {
      store.commit("aaa/SYNCA", store.state.aaa.a + 2);
    }

    // 异步修改state
    function setASYNCA() {
      store.dispatch("aaa/ASYNCA", 1);

      // 如果在 action 中，返回了一个 promise 数据，可以使用链式的方式获取数据
      // store.dispatch("ASYNCA", 1).then((res) => console.log(res)).catch((err) => console.log(err));
    }
    return { store, setSYNCA, setASYNCA };
  },
};
</script>