vue尚品汇商城项目-day02【14.vuex状态管理库】

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.动态展示三级菜单联动】