一、什么是vuex？

官网：vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex可以统一管理项目中公用的数据，借助vue调试工具可以记录每一次的修改，以及修改者。

1. vuex中的模块

vuex中有五大模块,分别是：

• state ——–>需要管理的数据存放在这里
• mutations——->唯一可以同步修改state的地方
• actions——->异步修改state,本质还是通过mutations修改
• getters——->类似组件中的计算属性
• modules——->如果需要vuex管理的数据多的话，可以拆分为一个个模块

二、vue3中使用vuex

1. 准备

• src/store文件夹下新建modules文件夹
• modules文件夹下新建user.js文件

代码如下（示例）：

// 用户
export default {
  // 开启命名空间
  namespaced: true,
  state: {
    info: {
      uname: 'Leo',
      age: 21
    }
  },
  mutations: {
    updateUname(state, val) {
      state.info.uname = val
    },
    updateAge(state, val) {
      state.info.age = val
    }
  },
  actions: {
    asyncUpdate(store, val) {
      setTimeout(() => {
        store.commit('updateAge', val)
      }, 2000)
    }
  },
  getters: {
    format(state) {
      return state.info.uname + ',nice to meet you~'
    }
  }
}

• modules文件夹下新建global.js文件作为公共模板,不开启命名空间

代码如下（示例）：

// 全局
export default {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}

• src/store文件夹下的index.js文件中引入上面两个文件

import { createStore } from 'vuex'

import global from './modules/global.js'
import user from './modules/user.js'

export default createStore({
  // 公共模板直接在这里展开就可以
  ...global,
  modules: {
    user
  }
})

2. 使用

在任意一个.vue结尾的文件中使用

代码如下（示例）：

<template>
  <div>同步修改state：{{ $store.state.user.info.uname }}</div>
  <p>-----------------------------------------------</p>
  <div>异步修改state:{{ $store.state.user.info.age }}</div>
  <p>-----------------------------------------------</p>
  <div>getters数据:{{ $store.getters['user/format'] }}</div>
  <button @click="handleClick">修改</button>
</template>

<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup() {
    const store = useStore()
    const handleClick = () => {
      console.log(store)
      
      store.commit('user/updateUname', 'Tom')

      store.dispatch('user/asyncUpdate', 23)
    }

    return { handleClick }
  }
}
</script>

结论：

1. setup中执行顺序在beforeCreate和created之前(vue3中setup替代了这俩生命周期钩子函数)
2. vue3中没有this，组合API写法需要用到什么，就按需引入什么
3. ,需要处理vuex中的数据，就需要从vuex中按需引入useStore
4. 模板中使用与vue2类似

三、 vuex持久化

1. 为什么需要持久化处理？

如果不做初始化，刷新页面，vuex中代码重新执行，数据就会丢失。

2. 如何做持久化处理？

手动持久化处理代码比较零散，这里使用vuex提供的包来进行持久化处理。

• 安装依赖 npm i vuex-persistedstate
• 初始化 在src/store文件下的index.js文件中

import createPersistedstate from 'vuex-persistedstate'

export default createStore({
  // 省略其他
  plugins: [
    createPersistedstate({
      key: 'saveInfo',
      paths: ['user', 'cart']
    })
  ]
})