vuex 的使用

vuex 是一个插件，可以帮我们管理 vue 通用的数据（多组件共享的数据）

 

应用场景：

1. 某个状态在很多个组件来使用（个人信息）

2. 多个组件共同维护一份数据（购物车）

 

vuex 的优势：

1. 共同维护一份数据，数据集中化管理

2. 响应式变化

3. 操作简洁（vuex 提供了一些辅助函数）

 

 

vuex 的使用：

1. 安装 vuex 插件：npm install vuex@3

2. 新建 vuex 模块文件：

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

3. 初始化一个空仓库：

   ① Vue.use (Vuex)   ② 创建空仓库 const store = new Vuex.Store()   ③ 导出给 main.js 使用：export default store

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

① import store from '@/store/index.js'

② 挂载：

new Vue({

  store,

  router,

  render: h => h(App)

}).$mount('#app')

 

 

仓库创建完成后，所有组件都能通过 this.$store 访问到