Vuex安装 #

版本选择 #

Vuex 的版本需要与 Vue 版本匹配：

Vue 版本 Vuex 版本 安装命令
Vue 3.x Vuex 4.x npm install vuex@next
Vue 2.x Vuex 3.x npm install vuex

安装方式 #

NPM 安装 #

bash 
# Vue 3 项目
npm install vuex@next

# Vue 2 项目
npm install vuex

Yarn 安装 #

bash 
# Vue 3 项目
yarn add vuex@next

# Vue 2 项目
yarn add vuex

CDN 引入 #

html 
<!-- Vue 3 + Vuex 4 -->
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vuex@4"></script>

<!-- Vue 2 + Vuex 3 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vuex@3"></script>

项目配置 #

Vue 3 项目配置 #

1. 创建 Store 文件 #

javascript 
// src/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

2. 在 main.js 中注册 #

javascript 
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)

app.use(store)
app.mount('#app')

Vue 2 项目配置 #

1. 创建 Store 文件 #

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

2. 在 main.js 中注册 #

javascript 
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

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

项目结构 #

基础结构 #

text 
src/
├── store/
│   └── index.js          # Store 入口文件
├── main.js               # 应用入口
└── App.vue               # 根组件

模块化结构（推荐） #

text 
src/
├── store/
│   ├── index.js          # Store 入口，组装模块
│   ├── state.js          # 根状态
│   ├── mutations.js      # 根变更
│   ├── actions.js        # 根动作
│   ├── getters.js        # 根派生
│   └── modules/          # 模块目录
│       ├── user.js       # 用户模块
│       ├── cart.js       # 购物车模块
│       └── products.js   # 商品模块
├── main.js
└── App.vue

使用 Vue CLI 创建项目 #

创建新项目时集成 Vuex #

bash 
# Vue 3 项目
vue create my-project
# 选择 Manually select features
# 勾选 Vuex

# Vue 2 项目
vue create my-project
# 选择 Manually select features
# 勾选 Vuex

在现有项目中添加 Vuex #

bash 
vue add vuex

这个命令会自动：

  1. 安装 Vuex 依赖
  2. 创建 store 目录和文件
  3. 在 main.js 中注册 Store

TypeScript 支持 #

Vue 3 + TypeScript #

typescript 
// src/store/index.ts
import { createStore, Store } from 'vuex'

// 定义状态类型
interface State {
  count: number
  user: {
    name: string
    age: number
  } | null
}

// 创建带类型的 store
const store = createStore<State>({
  state: {
    count: 0,
    user: null
  },
  mutations: {
    increment(state: State) {
      state.count++
    },
    setUser(state: State, user: State['user']) {
      state.user = user
    }
  }
})

export default store

声明文件 #

typescript 
// src/shims-vuex.d.ts
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: Store
  }
}

开发工具配置 #

Vue DevTools #

安装 Vue DevTools 浏览器扩展：

  1. Chrome: Vue.js devtools
  2. Firefox: Vue.js devtools

开发模式配置 #

javascript 
// src/store/index.js
import { createStore } from 'vuex'

const store = createStore({
  // 开发模式下开启严格模式
  strict: process.env.NODE_ENV !== 'production',
  
  state: {
    // ...
  }
})

export default store

验证安装 #

检查安装是否成功 #

vue 
<!-- App.vue -->
<template>
  <div id="app">
    <p>Count: {{ $store.state.count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  },
  
  mounted() {
    // 检查 $store 是否可用
    console.log('Vuex Store:', this.$store)
  }
}
</script>

在控制台测试 #

javascript 
// 浏览器控制台中
// 访问 store
console.log(this.$store)

// 访问状态
console.log(this.$store.state)

// 提交变更
this.$store.commit('increment')

常见问题 #

1. 版本不匹配 #

text 
Error: [vuex] vuex requires a Promise polyfill in this browser.

解决方案：Vuex 依赖 Promise，旧浏览器需要 polyfill：

javascript 
// main.js
import 'es6-promise/auto'

2. Vue.use() 重复调用 #

javascript 
// 错误：重复调用
Vue.use(Vuex)
Vue.use(Vuex)

// 正确：只调用一次
Vue.use(Vuex)

3. Store 未注册 #

text 
Error: Cannot read property 'state' of undefined

解决方案：确保在创建 Vue 实例时传入 store：

javascript 
// Vue 3
app.use(store)

// Vue 2
new Vue({
  store,
  render: h => h(App)
})

下一步 #

安装完成后，继续学习：

最后更新：2026-03-28