【前端技术】Vuex 快速入门（面向初学者）

本文链接：https://blog.csdn.net/weixin_46453070/article/details/148668906

Vuex 快速入门（面向初学者）

Vuex 快速入门（面向初学者）

Vuex 快速入门（面向初学者）

Vuex 是 Vue 生态里的「集中式状态管理」库。
一句话：当你需要在多个组件之间共享、持久或可追踪的数据时，用 Vuex 可以让数据流动可控、可调试、可预测。

1. 为什么要用 Vuex？

组件树很深：props/emit 层层传递麻烦。
跨页面共享：登录信息、购物车等全局状态。
调试回滚：通过时间线看每一次状态变更。
统一规则：所有修改都在一个地方（mutation），好管理、便于协作。

2. 核心概念秒记

概念	作用	关键词
state	数据源	单一真相
getter	派生数据(类似计算属性)	缓存
mutation	同步修改 state 的唯一入口	必须是同步
action	处理异步逻辑，再提交 mutation	Ajax / 定时器
module	将大 store 切分为命名空间	解耦

3. 安装与创建 Store

# Vue 2 项目
npm i vuex@3

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    double: state => state.count * 2
  },
  mutations: {
    INCREMENT (state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement ({ commit }) {
      setTimeout(() => commit('INCREMENT'), 1000)
    }
  }
})

然后在入口文件挂载：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

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

4. 在组件里使用

<template>
  <div>
    <h2>计数：{{ count }}</h2>
    <p>双倍：{{ double }}</p>
    <button @click="INC">+1 (同步)</button>
    <button @click="asyncIncrement">+1 (异步)</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['double'])
  },
  methods: {
    ...mapMutations({ INC: 'INCREMENT' }),
    ...mapActions(['asyncIncrement'])
  }
}
</script>

要点
• mapState/mapGetters 把全局数据映射为本地计算属性。
• mapMutations/mapActions 把提交方法映射为组件方法。
• 切记：组件里不要直接改 state，必须走 mutation。

5. 模块化示例

// store/modules/user.js
export default {
  namespaced: true,   // 有命名空间
  state: () => ({ token: '' }),
  mutations: {
    SET_TOKEN (state, t) { state.token = t }
  },
  actions: {
    login ({ commit }, payload) {
      return api.login(payload).then(res => {
        commit('SET_TOKEN', res.token)
      })
    }
  }
}

// store/index.js
import Vuex from 'vuex'
import user from './modules/user'

export default new Vuex.Store({
  modules: { user }
})

组件调用：

// 带命名空间的映射
computed: {
  ...mapState('user', ['token'])
},
methods: {
  ...mapActions('user', ['login'])
}

6. 调试技巧

Vue Devtools → Vuex 标签页可查看 state 与 mutation 时间线。
严格模式：new Vuex.Store({ strict: process.env.NODE_ENV !== 'production' }) 防止非法改动 state。
插件：如 vuex-persistedstate 自动把某些 state 同步到 localStorage。