@[toc]
14.vuex状态管理库
14.1vuex是什么？
vuex是官方提供的一个插件，状态库管理，集中式管理项目组间共用的数据。
切记：并不是全部项目都需要vuex，如果项目很小，完全不需要vuex，如果项目很大，组件很多，数据很多，数据维护很费劲，就推荐使用vuex。
安装命令：npm install --save vuex
14.2使用vuex
第一种：非模块化，即store文件夹下只有一个总的index.js文件
- 第1步：先创建src/store/index.js文件
//引入Vue
import Vue from "vue"
//引入Vuex -----相当于咱们最大的仓库
import Vuex from "vuex"
Vue.use(Vuex)
//actions代表一系列动作，可以书写自己的业务逻辑，也可以处理异步
const actions = {}
//mutations代表维护，操作维护的是state中的数据，且state中数据只能在mutations中处理
const mutations = {}
//state代表仓库中的数据
const state = {}
//getters理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}
//需要暴露Vuex.Store类的实例(你需要暴露这个类的实例，如果你不对外暴露，外部是不能使用的)
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
- 第2步：在src/min.js中注册vuex
//引入vuex
import store from "@/store"
new Vue({
render: h => h(App),
//注册vuex,在每一个组件的身上都拥有一个$store这个属性
store,
}).$mount('#app')
第二种：模块化
- 第1步：在src/store文件夹下新建对应的路由组件模块的文件夹名称，并新建index.js文件
//Home模块的小仓库
//actions代表一系列动作，可以书写自己的业务逻辑，也可以处理异步
const actions = {}
//mutations代表维护，操作维护的是state中的数据，且state中数据只能在mutations中处理
const mutations = {}
//state代表仓库中的数据
const state = {}
//getters理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}
//创建并暴露store
export default {
actions,
mutations,
state,
getters
}
- 第2步：先创建src/store/index.js文件
//引入Vue
import Vue from "vue"
//引入Vuex -----相当于咱们最大的仓库
import Vuex from "vuex"
Vue.use(Vuex)
//引入home|search模块的仓库
import home from "@/store/home"
import login from "@/store/login"
import register from "@/store/register"
import search from "@/store/search"
//需要暴露Vuex.Store类的实例(你需要暴露这个类的实例，如果你不对外暴露，外部是不能使用的)
export default new Vuex.Store({
//模块：把小仓库进行合并变为大仓库
modules:{
home,
login,
register,
search
}
})
- 第3步：在src/min.js中注册vuex
//引入vuex
import store from "@/store"
new Vue({
render: h => h(App),
//注册vuex,在每一个组件的身上都拥有一个$store这个属性
store,
}).$mount('#app')
本人其他相关文章链接
1.vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
2.vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
3.vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
4.vue尚品汇商城项目-day02【14.vuex状态管理库】
5.vue尚品汇商城项目-day02【15.动态展示三级菜单联动】
