从0创建vuex状态管理仓库

原创于 2025-07-01 07:46:54 发布 · 606 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #学习 #vuex

前言

我上个文章中介绍了pinia状态仓库的创建、使用以及与vuex的区别，可以点击链接查看，这次就来看看如何创建vuex状态管理仓库，我也好久没使用vuex了，这次就当一次复习回顾的过程了。

1.实现步骤：

1.创建vue2项目

使用vue脚手架创建vue2项目

安装：

npm install -g @vue/cli

创建：

vue create vue2-vuex

安装vuex:

npm i vuex@3

@3是版本号，要注意的是vue2使用的是vuex3的版本，而vue3使用的是vuex4的版本。

2.创建仓库文件

一般是在src目录下创建store文件夹，并在其下创建index.js，结构如下：

import Vue from "vue";
import Vuex from 'vuex'

Vue.use(Vuex)

// state储存数据
const state = {
    user:{
        name:'张三'
    }
}

// mutations操作数据state，同步阻塞
const mutations = {
    updateUser(state,user){
        state.user = user
    }
}

// getters唯一取值方法，计算属性
const getters = {
    getUser(state){
        return state.user
    }
}

// actions响应组件中的动作，异步调用mutations方法
const actions = {
    asyncUpdateUser(context, user){
        context.commit('updateUser',user)
    }
}

// 创建store
const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions,
})

// 导出store
export default store

将定义的数据存放在state中。

取值使用getters。

有取值当然有存值，存值使用mutations，第一个参数就指向了定义的state对象，第二个参数是需要传进来的改变state对象中数据的值。但是它是同步阻塞，但需要去异步操作它，需要在actions去操作。

在actions中异步调用mutations方法，context表示的是上下文，也就是指这里面的所有对象，再通过commit去调取updateUser，后面传user进来。

这边全部定义完成了，这时候需要暴露出去。

3.配置main.js

import Vuex from 'vuex'
import store from './store'

Vue.use(Vuex)

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

4.调用数据getters

到这一步就可以实现对数据的修改和调用了。

{{ $store.getters.getUser.name }}

在页面中使用$store.getters可以找到我们创建的getters对象，然后调用getUser方法获取到state中存储的对象，这样页面正常打印张三。

5.修改数据actions

这里需要使用dispatch()方法修改数据，它有两个参数，第一个参数actions中的方法名，第二个参数是调用的实参。

<template>
  <div class="hello">
    <button @click="handleName">修改</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '李四'
    }
  },
  methods: {
    handleName() {
      this.$store.dispatch('asyncUpdateUser', { name: this.name })
    }
  },
}
</script>

在这个页面中给按钮一个点击事件，当点击时，会将data中的name传递给asyncUpdateUser函数，然后它会去修改仓库中state中的数据。

6.效果展示

没点击修改按钮显示的时张三，点击后正常修改为李四，到这里基本的vuex状态管理仓库就创建完成了。

2.持久化数据

当我们刷新页面后，数据会变为初始化状态，但我希望这个数据是持久化的，该如何解决？

将数据存放在sessionStorage

监听页面是否刷新，如果页面刷新了，将state对象存入sessionStorage中。判断sessionStorage中是否存在state，如果存在说明页面刷新了，将sessionStorage中的数据赋值给state，如果sessionStorage中没有state，则说明第一次打开，直接使用vuex中state中的数据。

在App.vue文件中在methods中添加一个方法，将vuex中的state存放到会话存储中，因为存储中的值只能为字符串类型，因此需要将数据转换为字符串类型再存储，然后判断刷新这个事件（unload），当刷新后执行methods中的函数。

mounted() {
    window.addEventListener('unload', this.saveState)
  },
  methods: {
    saveState() {
      window.sessionStorage.setItem('state', JSON.stringify(this.$store.state))
    }
  }

然后到vuex仓库中对state数据进行一个判断，当会话存储中有state，则将存储的数据曲出来，赋值给state，否则使用原数据。

const state = window.sessionStorage.getItem('state') != null ? JSON.parse(window.sessionStorage.getItem('state')) : {
    user: {
        name: '张三'
    }
}

使用三元表达式判断，当从会话存储中获取state不为null，说明刷新过页面，将会话存储中的state赋值给vuex中的state，因为存储的是字符串类型，需要转换为对象类型，否则取初始数据。

3.模块化

如果我们在vuex中不断定义新的数据和方法，就会变的很臃肿，影响后期的一个维护成本，这时候需要对vuex进行模块化。

就比如我要定义一个user模块，专门存放用户的数据，首先在store文件夹目录下创建modules文件夹，这里面专门存放我们分的模块，这样代码就清晰明了。

vuex仓库（store/index.js）:

import Vue from "vue";
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)


// 创建store
const store = new Vuex.Store({
    modules:{
        user
    }
})

// 导出store
export default store

模块化文件（store/modules/user.js）:

const user = {
    // state储存数据
    state: window.sessionStorage.getItem('state') != null ? JSON.parse(window.sessionStorage.getItem('state')) : {
        user: {
            name: '张三'
        }
    },

    // mutations操作数据state，同步阻塞
    mutations: {
        updateUser(state, user) {
            state.user = user
        }
    },

    // getters唯一取值方法，计算属性
    getters: {
        getUser(state) {
            return state.user
        }
    },

    // actions响应组件中的动作，异步调用mutations方法
    actions: {
        asyncUpdateUser(context, user) {
            context.commit('updateUser', user)
        }
    }
}

export default user;

模块化之后代码直接就清晰明了，当需要定义新的数据，再同样的方式，创建新的文件，导入到vuex中。

这里的持久化数据逻辑需要进行修改，因为模块化了，存储的数据应该是state中的user属性

methods: {
    saveState() {
      window.sessionStorage.setItem('state', JSON.stringify(this.$store.state.user))
    }
  }

结语：

通过本文的梳理，相信您对Vue2状态管理有了更清晰的认知。期待您在后续开发中灵活运用这些技巧，构建更健壮、可维护的Vue应用！如有疑问或想深入讨论，欢迎交流分享。