Vuex学习心得

Vuex学习心得

vuex

专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

多个组件共享数据——全局事件总线实现（工作量大，发送和接受的联系复杂）

vuex不属于任何一个组件，甚至APP组件

Vue2中要安装vuex3版本, Vue3中要安装vuex4版本

原理图

3个核心对象actions，mutations，state，

actions可以和后台接口通信（业务逻辑复杂时体现优势）

mutation负责和开发工具通信，进行共享数据的渲染

 

配置

在main.js导入store ，并在new Vue({})中添加store属性

 /* 引入store */import store from '@/store/index.js'​new Vue({render: h => h(App),store,        //添加store属性beforeCreate() {Vue.prototype.$bus = this}}).$mount('#app')

在src下创建store文件夹，创建index.js中引入并使用vuex

 /* 创建Vuex中最核心的store  */​//导入Vue和vueximport Vue from 'vue'import Vuex from 'vuex'​/* 使用vuex */Vue.use(Vuex)const actions = {}const mutations = {}const state = {}const getters = {}​export default new Vuex.Store({actions,mutations,state,getters})

注意，vue-cli会将所有import语句先引入并执行

若没有业务逻辑或网络请求，可以跨过actions直接执行commit

getters对象：与Vue实例中的computed类似

 // 对state中的数据源进行加工，类似于computed属性const getters = {bigSum(state) {return state.sum * 10}}

mapState

映射state中属性为计算属性

对象格式

  // 借助mapState生成计算属性，从state中读取数据(对象格式)...mapState({ sum: 'sum', school: 'school', major: 'major' }),​

数组格式（计算属性名和state数据名一致时使用）

  // 借助mapState生成计算属性，从state中读取数据...mapState(['sum', 'school', 'major']),

mapGetters

数组格式

  // 借助mapGetters生成计算属性，从state中读取数据...mapGetters(['sum', 'school', 'major']),

mapActions

映射actions中的dispatch方法

对象格式

在标签中调用时，方法参数为要操作的数据

mapMutations

映射mutations中的commit方法

对象格式

在标签中调用时，方法参数为要操作的数据