一、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