data 获取vuex_记账项目笔记(二) Vuex的应用

数据的管理是第一位的也是最麻烦的，所以 Vue 提供了 Vuex 全局管理数据，这样数据就不会因为各种应用而杂乱不堪，使得代码很乱

安装

npm install vuex --save // npm 用法

yarn add vuex // yarn 用法

引入

在 main.ts 里，挂载到全局

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

Vue.use(Vuex) 

使用

建议单独建立一个文件去存储

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

• state 里创建的就是全局数据，相当于 data，这里创建后，在其他文件使用 this.$store.state.count 就可以获取到 count 数据（只读）
• mutations 这是可以对 state 里的数据进行操作的函数，相当于 methods
• actions 相当于异步的 methods （项目里没用到）
• module 就是把繁杂的数据和方法归类，便于管理（项目里没用到）

想了解 actions 和 module 请看官方文档

• 这是我项目里的全局数据，因为还有 TS，所以给每个数据添加了类型

• 这是管理数据的方法，比较多我就不展开了

• 这是获取全局数据的方法，官网也有介绍，我这是 TS 里 computed 的获取方法

• 调用全局方法

整体思路

1. 从全局里拿到数据
2. 利用全局数据去渲染页面
3. 从页面里拿到修改的数据
4. 把修改的数据交给全局方法，去改全局数据

做个比喻可能更好理解：

你的钱 （数据）都存在银行里，你用到的时候就去银行里拿到钱，然后你花钱或者挣钱，然后你再把花了多少钱或挣了多少钱存到银行 （方法），这时候银行会给你改以前的数据更改，而不需要你去操作钱的数目

这样就实现了全局管理数据，很方便而且不会乱，也是 Vuex 设计的初衷吧（个人想法）

Vuex 就先说这么多，以后用到了 action 和 module 会继续更新的哈！