介绍
- Vuex是为Vue.js应用程序开发的状态管理模式，采用集中式存储管理所有组件的状态，通俗来讲，是为了实现任意组件之间的通信，其主要包含四个模块：
image - state：保存整个应用的状态（数据）
- mutations：改变状态的唯一方式，同步操作
- actions：类似mutation，异步操作
- vue components：vue组件
安装
- 在项目目录下使用npm或cnpm：
npm install vuex --save
image
- 安装完成后再次下载依赖
npm install
使用
-
安装完成后，建议在src目录下单独创建一个文件夹，用于保存vuex的js脚本文件
image - 在文件中引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
- 使用引入后，切记引用vuex
Vue.use(Vuex)
image
Vuex倡导存、读、写分离
State（存）
- state负责存储整个应用的状态数据，在需要使用的时候在根节点注入store对象，注入后使用
this.$store.state获取状态
image
image
image
- 重命名该状态：
-
通过计算属性computed直接赋值：
image -
通过mapState进行赋值：
computed: mapState({ nameFromMapState: state => state.person.name, ageFromMapState: state => state.person.age, genderFromMapState: state => state.person.gender, }) -
mapState的更简单写法：若映射的属性名称与state的子节点名称相同时，可采用字符串数组的形式简写
mapState(['person','time']) //映射this.person为store.state.person
-
getters（读）
- getter属性可以认为是store的计算属性，它接收state作为第一个参数
image
- getters暴露一
个store.getters对象，通过这个对象访问其内部数据
this.$store.getters.getYear
- getters也可用mapGetters进行改名：
mapGetters({
yearFromMapGetters: 'getYear',
monthFromMapGetters: 'getMonth',
dayFromMapGetters: 'getDay',
})
mutations
- 唯一更改store中状态的方法
