从0开始搭建基于VUE的前端项目(三) Vuex的使用与配置
准备与版本
- vuex 3.6.2（https://v3.vuex.vuejs.org/zh/）
概念
-
vuex是什么？
是用作 【状态管理】的
流程图如下
-
state 数据状态，成员是个对象
mapState
组件使用this.$store.state.xxx获取state里面的数据 -
getters 成员是个函数，方便获取state里面的数据，也可以加工数据
mapGetters
组件使用this.$store.getters.xxx获取state里面的数据 -
mutations 成员是个函数，修改state里面的数据
mapMutations
组件使用this.$store.commit(‘方法名称’), 提交要修改的数据 -
actions 成员是个函数，修改state里面的数据，可写异步的方法
mapActions
组件使用this.$store.dispatch(‘方法名称’), 分发要修改的数据 -
modules 成员是个对象，里面包含（state、getters、mutations、actions），由于业务比较复杂，可分模块管理状态，每个模块都有自己的state、getters、mutations、actions，特别注意的是 state是个函数
安装
安装要指定版本，默认安装的4版本的
npm install vuex@3.6.2
代码实现
- 在src目录下创建以下
store/index.js
store/modules/
2) src/store/index.js代码
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {testCount: