vuex 概述

合集 - vue(4)

1.vuex 概述2024-07-25

2.Vuex-核心概念 - state2024-07-253.vuex—核心概念mutations2024-07-284.vuex核心概念---action、getter、module2024-07-28

收起

任务

1. vuex是什么？
2. 应用场景有哪些？
3. 优势有哪些？
4. 缺点有哪些？
5. 如何使用vuex

1.vuex是什么？

答：vuex是管理通用数据的插件，也称为状态（管理）管理工具。例如购物车数据，个人信息数据。

---

2.应用场景有哪些

答：

1. 某个状态（数据）， 在很多个组件中使用 =======》个人信息
2. 多个组件，共同维护一份数据 =======》购物车信息

---

3.优势

答：

1. 数据集中化管理
2. 响应式变化
3. 内置函数使得操作简洁

4.缺点

刷新浏览器，vuex中的state会重新变为初始状态
解决方案-插件vuex-persistedstate

---

5如何使用vuex？

答：

1.安装 vuex

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

2.新建store.index.js

在正确的加载创建项目后会有一个store文件夹内有一个，我们可以在其中进行操作。

index.js其内代码如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

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')

这里就成功创建了空的仓库。