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

Vue2中 vuex 的使用

article 2024/11/28 14:51:14

1.安装 vuex

安装vuex与vue-router类似，vuex是一个独立存在的插件，如果脚手架初始化没有选 vuex，就需要额外安装。

yarn add vuex@3 或者 npm i vuex@3

233 Vue2 + Vue-Router@3 + Vuex@3

344 Vue3 + Vue-Router@4 + Vuex@4

2. 新建 `store/index.js` 专门存放 vuex

3. 创建仓库 `store/index.js`

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

4. 在 main.js 中导入挂载到 Vue 实例上

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

Vue.config.productionTip = false

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

此刻起, 就成功创建了一个 空仓库!!

Vuex核心概念总结：