vuex知识点以及相关笔记

一、vuex简介

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex可以作为一种插件，可以将数据，同步异步的方法统一管理，vuex这个整体是一个仓库，用store来指定，这个仓库包含了数据和方法，

仓库内部分为了三个区域

actions是存放异步方法并且调用的地方

mutations是存放同步调用方法的地方并且将数据传给state

state，状态，是存放数据处

二、使用vuex

1.安装

vuex的版本要领先vue版本，即当vue版本为vue2.xxx时，vuex的版本应该为vuex3.xxx，

当vue3时，就应当安装vuex4

开始安装：在项目根目录下安装 

首先通过命令查找所有可用的vuex版本

npm view vuex versions --json

在package.json中查看vue的版本

在项目中安装指定的vuex3.版本

 npm i vuex@3.6.2

 全局安装指定版本

npm install -g vuex@4.0.0

使用vuex 

 引入插件后，use方法使用插件，然后定义仓库store

// 引入插件vuex
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	state: {
	  count: 0
	},
	mutations: {
	  increment (state) {
		state.count++
	  }
	}
  })

 将store挂载到vue实例上

new Vue({
	el:'#app',
	store,
	render: h => h(App)
})

此时所有的组件实例都可以访问到store 

 至此就基本定义 完成，

*注意import Vuex from 'vuex'，类似语句是同步且优先执行，Vue.use(Vuex)，然后才创建仓库store