当前位置：首页 > article >正文

vue3使用vuex 集中式管理状态数据

article 2025/2/5 4:15:05

vue3使用vuex 版本号建议4.x ，目前最新版本号"vuex": "4.1.0"

vuex4.x版本中取消了一些辅助函数，包括mapActions、mapGetters、mapState和mapMutations。这些辅助函数被迁移到了官方的插件vuex-extension中，可以在npm上搜索并安装相应的插件：安装vuex-extension。

Vuex: 集中式管理状态数据，进行任意组件的通信操作

store（仓库）是vuex的核心对象

state对象：包含了多个状态数据的对象，state是应用程序的状态管理模式中定义的数据源

mutations对象：包含了多个直接修改状态数据的方法的对象,

mutations 是同步修改 state 状态的。

mutations 修改 state 必须是通过 store.commit() 来触发。

mutations 只能处理数据的同步操作。

actions对象：包含了多个间接修改状态数据的方法的对象。

action 是异步的，用于处理异步操作或复杂的操作逻辑。

action 一般不直接修改 state 状态，而是提交 mutations 完成具体的状态变更。

action 可以提交 Mutations，也可以赋值 state 状态。

action 通过 store.dispatch 触发。

modules：模块化

所有状态会集中到一起会是个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决这个问题，可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。

如果需要修改状态数据：

1. 不能直接修改state中的数据

2. 如果要修改数据，请使用对应的mutations中的方法

3.通过dispatch进行提交action，修改状态数据，内部是通过commit找到对应的mutation进行数据的修改

getters对象：包含了多个状态数据的计算属性的get方法的对象(状态数据的变化，会影响其他的数据变化，计算属性中的get方法)

Vuex的使用步骤

1. src目录中创建一个目录store，内部有一个文件 index.ts

2. 安装命令： npm install vuex

组件和Vuex之间的联系，是通过main.ts 中进行了store的注册，才有了关系。

安装vuex完成后src创建以下目录及文件：

index.ts文件代码：

import { createStore } from 'vuex'
import getters from './getters'
import { IState } from '@/types/storeState'
// 因为我把模块拆分了，但是我又不想每次都导入，就通过这个自动导入modules目录下的模块
const modulesFiles = require.context('./modules', true, /\.ts$/);
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const state: IState = {
  token: '', // 用户标识
}
const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
}

const actions = {
  setToken({ commit }, token) {
    commit('SET_TOKEN', token) 
  },
}
// 调用createStore
export default createStore({
  getters,
  modules,
  state,
  mutations,
  actions
})

getters.ts文件代码：

const getters = {
  avatar: state => state.user.avatar,
  usertitleName: state => state.user.usertitleName,
}
export default getters

persistence.ts文件代码（用于持久化存储）：

import {Store} from "vuex";

export default<T> (store: Store<T>): void=>{
    // 不需要持久化的数据存入sessionStorage - 永久存储localStorage
    if (sessionStorage.getItem('store')){
        store.replaceState(
            Object.assign(
                {},
                store.state,
                JSON.parse(sessionStorage.getItem('store') as string)
            )
        );
        // 移除缓存中的数据
        sessionStorage.removeItem("store");
    }
    // 页面刷新的时候进行持久化
    window.addEventListener('beforeunload',()=>{
        sessionStorage.setItem("store", JSON.stringify(store.state));
    })
}

modules文件夹下user.ts文件代码：

interface UserIState{
  usertitleName: string,
  avatar: string,
}

const state: UserIState = {
  usertitleName: '',
  avatar: '',
}

const mutations = {
  SET_NAME: (state, usertitleName: string) => {
    state.usertitleName = usertitleName
  },
  SET_AVATAR: (state, avatar: string) => {
    state.avatar = avatar
  },
}

const actions = {
	setUsertitleName: ({ commit }, usertitleName) => {
    commit('SET_NAME', usertitleName)
  },
  setAvatar: ({ commit }, avatar) => {
    commit('SET_AVATAR', avatar)
  },
}

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

main.ts代码：

import { createApp } from 'vue'
import App from './App.vue'
import initStorePersistence from './store/persistence'
import store from './store/index'
initStorePersistence(store) // 缓存vuex

const app = createApp(App)
app.
    use(store).mount('#app')

App.vue代码：

<template>
  <div style="font-size: 14px;">
    <h2>vuex的store</h2>
    <div>
      store.state.user:
      {{ store.state.user }}
    </div>

    <div>
      store.state.token:
      {{ store.state.token }}
    </div>
    <h2>组件的state</h2>
    <div>
      <div>{{token}}</div>
      <div>{{name}}</div>
      <img v-if="avatar" :src="avatar" width="100" alt="">
    </div>
    <RouterView></RouterView>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs, } from 'vue';
import { useStore } from "vuex";

export default defineComponent({
  name: "App",
  setup() {
    const store = useStore();
    const state = reactive({
      token: '',
      name: '',
      avatar: '',
      setInfos: () => {
        // 模拟一个接口 2秒后获取数据
        setTimeout(() => {
          state.token = '1234567890'
          state.name = '张三'
          state.avatar = 'https://img2.baidu.com/it/u=1294728680,2976403440&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
          // 修改vuex的store数据
          // actions 方式修改user/模块下的数据
          store.dispatch('user/setUsertitleName', state.name)
          // mutations 方式修改 user/模块下的数据
          store.commit('user/SET_AVATAR', state.avatar)
          // actions 方式修改数据 token
          store.dispatch('setToken', state.token)
        }, 2000)
      }
    })

    onMounted(() => {
      console.log(store.state);
      state.setInfos()
    })

    return {
      store,
      ...toRefs(state),
    };
  },
});
</script>