Vuex#
官方的解释: vuex是专门为Vue.js应用程序开发的状态管理模式,它采用集中式的储存应用中所有组件的状态,并以相应的规则保证状态以一种可预期的方式发生变化
说白了: 当我们划分组件之后,每一个组件都有自己的属性,但是不同的组件的数据是不能共享的,于是我们可以使用从父组件往子组件传播数据的模式, 而且完全不相干的两个组件可能需要对方data里的数据,又怎么传递呢? vuex 就应对 迎战这个问题
vuex就是一个单独存储的区域,用于存放公共的属性
安装命令:#
npm install --save vuex
创建vuex的四个组件对象,如上图
vuex的组件对象一: state.js#
状态对象,存放一系列的状态,其实就是把子组件中data里面的字段赋复制过来
state.js文件 export default { arr: [] }
vuex的组件对象二: actions.js#
超级重要的组件, 在这个组件中我们可以提交异步事件, 最常用的就是用户直接通过$store.dispatch('action中的方法名'), action会触发 mutation的调用, 间接更新状态
action.js // add方法的方法第一个参数是不变的{commit}, 其实他就是 $store 对象 // 通过这个commit方法, 把数据包装成对象传递给 mutations // 第二个参数的可选的,可以是调用者传递进来的参数,也可以是state对象 export default { add({commit},item){ // 提交mutation请求 commit(ADD_TODO,{item}); // 把数据包装成对象传递给 mutations },
vuex的组件对象三: mutations.js#
真正的去执行action传进来,更新state中数据的操作
mutations.js export default { add(state,{item}){ state.arr.unshift(item); } }
vuex的组件对象四: getters.js#
包含了所有的基于state的 get计算属性, 这一点也很好用,他是一种双向的数据绑定
getters.js export default { // 计算属性 totalCount (state) { return state.arr.length }, }
把四个组件拼装成store对象#
- 在src下创建store文件夹,在改文件夹下创建store.js
- 导入Vue , Vuex
- 声明Vue使用Vuex
- 将上面的四个组件注册进来store.js
state: 状态对象,存放的是需要共享数据的字段
actions: 包含多个事件回调函数的对象
mutations: 包含真正去更新state中字段的函数
getter: 计算属性的方法 - 对外暴露匿名store对象
- 将store配置进main.js vue的入口js中
编码实现: store.js
store.js import Vue from 'vue' import Vuex from 'vuex' import state from './state' import actions from './actions' import mutations from './mutations' import getters from './getter2' Vue.use(Vuex) // 对外暴露你匿名 store对象 export default new Vuex.Store({ state, actions, mutations, getters }) 把store对象,注册进main.js
更全面的数据处理流程图#
获取state中的值#
做好了上面的配置,在任何地方都能用下面的方式获取出store里面的数据
this.$store.state.属性
使用vuex,改变状态值#
添加上前缀,再使用
this.$store.commit('matations中的方法名','可选的参数') // 注意哦, action中是可以提交异步函数的 this.$store.dispach('action中的方法名'，'可选的参数')
也可以像下面这样,先进行映射就可以不再添加任何前缀,直接使用他们
// 从vuex中引入映射 import {mapState,mapGetters,mapActions} from 'vuex' export default { computed:{ ...mapState(['state中的属性值']) ...mapGetters(['getters.js中的方法名']) }, methods:{ ...mapActions(['actions.js中的方法名']) } }
