web前端笔记（vuex的理解）

个人笔记
项目demo8

1.Vuex简介

1.1 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.2 vuex的安装

1.2.1 使用vue-cli新建项目时可勾选vuex，项目新建完成后在store文件夹中使用（推荐）

1.2.2 NPM安装

npm i vuex -s

安装后在src目录下新建store文件夹

在index.js中引用其他属性 同时也要在mian.js中引用store

import Vue from 'vue'
import Vuex from 'vuex'
import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"

Vue.use(Vuex)

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

2.Vuex的工作流程

3.Vuex的五个核心属性

①　state：Vuex的基本数据

②　getters：从基本数据(state)派生出来的数据，可以说是Vuex的计算属性

③　mutations：提交更新数据的方法，必须是同步的有（异步则使用actions），每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler），回调函数就是实际进行状态更改的地方，接受state为第一个参数，提交载荷为第二个参数

④　actions：actions提交的是mutations中的方法，不是直接变更状态；可以包含异步操作

⑤　modules：模块化vuex，可以让每个模块有自己的state、getters、mutation和action，使得结构清晰，方便管理。在modules中，如果想使模块具有更高的封装度和复用性，可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

4.Vuex的使用

4.1 在组件中使用