Vuex学习笔记

• 学习资源： https://vuex.vuejs.org/zh-cn/

介绍

• 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中状态的方法