vuex使用教程详细笔记

简介

vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

vuex组成结构示意图

vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。
vuex里有这么一个规则：

只能在mutaions里修改state，actions不能直接修改state

mutations即变化，修改state的数据，而且只能是同步的，不能存在异步的操作。如果需要异步怎么办呢？把异步操作放在actions里，拿到数据再通过mutations同步处理。vuex做的其实是把职权明确了，责任细分了。所以它文档里也说，小系统可以不用。状态数据少，没有细分的必要。

安装

// 目前版本 "vuex": "^3.6.0"
npm install --save vuex

vuex 的核心概念

建立以下目录结构

/ src
	/ store
		- index.js
		- actions.js
		- mutations.js
		- state.js
		- getters.js

如图：

store

vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。

• 创建store

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import mutations from './mutations.js'
import actions from './actions.js'
import getters from './getters.js'

Vue.use(Vuex)

export default new Vuex.Store({
   
    state,
    mutations,
    actions,
    getters
})

• 引入store

// main.js
import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
   
  el