日常学习笔记 - Vuex的安装使用及五大属性

一、Vuex是什么？

用官方文档的话来说，Vuex是为Vue.js而开发的一种状态管理模式，用于存储状态（数据），Vuex中存储的状态只能通过commit方式来进行修改，以达到对状态的监听。

二、Vuex的安装使用

1. 安装

// Vuex3版本（配套Vue2.0）
npm install vuex --save

// Vuex4版本（配套Vue3.0）
npm install vuex@next --save

2. 创建一个store.js文件

// Vuex3版本（配套Vue2.0）
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    name: "杰克"
  },
  mutations: {
    setName(state, val) {
      state.name = val;
    }
  }
})

// Vuex4版本（配套Vue3.0）
import { createStore } from 'vuex'

const store = createStore({
  state () {
    return {
      name: "杰克"
    }
  },
  mutations: {
    setName(state, val) {
      state.name = val;
    }
  }
})

三、Vuex的五大属性

1. State：vuex的状态树，即数据源，类似于data。
2. Mutations：同步操作，唯一修改State中 状态值的途径，通过commit触发Mutations中声明的函数。
3. Actions：异步操作，如果函数涉及异步操作，则必须声明在Actions中，改变状态值时仍然需要使用commit触发Mutations中的同步函数；页面中调用Actions中的方法则利用store.dispatch触发。
4. Getters：计算属性，用法基本和computed相同。
5. Modules：模块化，简单理解为在同一项目内，分别给不同的模块定义不同的store，每个store同样具备独立的五大属性。
   
   

四、结尾

Vuex3和Vuex4的写法有部分差异，具体的写法参考官方文档。
Vuex3文档地址：https://v3.vuex.vuejs.org/zh/
Vuex4文档地址：https://vuex.vuejs.org/zh/