Vue（入门到转行）：Vuex

简介

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

应用场景

  单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

安装

	npm install vuex@3.6.2 --save

state

只用来读取的状态集中放在store中

第一步：在src下创建store文件夹，并在文件夹下创建index.js 填入以下代码

import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 启用vuex
Vue.use(Vuex)

// 创建vuex实例
export default new Vuex.Store({
    state: {},
    mutations: {}, // testMutation(state, v) {}
    actions: {}, // testAction(store) {}
    getters: {}, //testAetter(state) {return ...}
    modules: {}
})

第二步：将vuex实例引入main.js并挂在到vm对象上

第三步：将数据存放在state里面

第四步：在组件中使用

mutation

改变状态的方式是提交mutations，这是个同步的事物

action

异步逻辑应该封装在action中

类似于mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
  

getter

像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

module

分块设计

第一步：在store文件夹下创建module.js ，并引出模块

第二步：在store/index.js中引入模块

第三步：在vue组件中使用