vueX的使用（vue3）

vuex的详细使用，getters是计算属性，提交修改mutations的数据，异步请求的操作写在action

store/index.js

import { createStore } from "vuex";

export default createStore({
  state: {
    //vuex的仓库原始值
    userName: "zs",
  },
  getters: {
    //计算属性
    newName(state) {
      return state.userName + "！！！";
    },
  },
  mutations: {
    //更新
    updateName(state) {
      state.userName = "ls";
    },
  },
  actions: {
    updateName2(state) {
      setTimeout(() => {
        state.commit("updateName");
        console.log("1秒后修改");
      }, 1000);
    },
  },
  modules: {},
});

app.vue

<template>
  <button @click="mutationsFn">修改name</button>
</template>

<script>
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    // 使用store的数据
    console.log(store.state.userName)
    // 使用getters的数据
    console.log(store.getters.newName)
    const mutationsFn = () => {
      // 提交mutations的数据
      // store.commit('updateName')
      // console.log(store.state.userName)
      // 使用action,异步请求的操作写在action
      store.dispatch('updateName2')
    }
    return {
      mutationsFn
    }
  }
}
</script>
<style lang="less">
</style>

modules分为默认的state是全局的，namespaced: true,为当前模块开启独立的命名空间，有更高的封装，vue3的使用方法如下图箭头所示。

vuex持久化安装插件npm i vuex-persistedstate，导入设置本地存储，mutations更新时直接存储，也可以设置在cookie里面，不建议直接存在localStorage，数据做不到真正的响应式更新比较麻烦。