【store·vuex·仓库】三连环

vuex状态管理库

vuex是官方提供一个插件，状态管理库，集中式管理项目中组件共用的数据。

不是全部项目都需要vuex,如果项目很小，完全不需要vuex，如果项目很大，组件很多、数据很多，数据维护很费劲就使用。

state
mutations
actions
getters
modules

一、创建store–index.js

在index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
//使用插件
Vue.use(Vuex)
//一定要暴露store类的实例
export default new Vuex.Store({
    modules: {
        tab,
        login
    }
})

这样则可以在小仓库 tab,login分别管理数据

//state：仓库存储数据的地方
const state = {}
//mutations：修改state的唯一手段
const mutations = {}
//action：处理action,可以书写自己的业务逻辑，也可以处理异步，但是不能修改state
const actions= {}
//getters:理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}
//对外暴露
export default {
  state,
  mutations，
  actions，
  getters
}

二、在main.js中引入

import store from '@/store'
new Vue({
//注册路由：底下的写法KV一致省略v〖router小写的〗
//注册路由信息：当这里书写router的时候，组件身上都有route实例对象
  router,
  //注册仓库：件实例的身上会多个一个属性$store属性
  store,
  el: '#app',
  render: (h) => h(App)
}).$mount('#app')

三、使用

1.直接在组件页面的mounted派发dispatch

mounted(){
//挂载完毕可以向服务器发请求
//通知vue×发请求，获取数据，存储于仓库当中
this·$store.dispatch('categoryList'）；
}

2.去相应仓库书写action

//在仓库中引入接口请求
import { getCategoryList} from "@/api"

const actions = {
//此处定义一个函数
//{ commit }为解构赋值
  async categoryList({ commit }) {
 //要拿到promise成功的结果，所以要用await
    let result = await reqCategoryList();
    //console.log(result,'333333')
    if (result.code == 200) {
      commit("CATEGORYLIST", result.data);
    }
    // commit("CATEGORYLIST", result.data)中，CATEGORYLIST为名字
    //result.data为传递的数据

——————以下是引用别的博客的（侵删）———————

async用法

async作为一个关键字放到函数前面，用于表示函数是一个异步函数。异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

await用法

await是等待的意思，它后面可以放任何表达式，不过我们更多的是放一个返回promise对象的表达式。
——注意：await关键字只能放到async函数里面。
async函数里的碰到await，就暂停await后面代码的执行，而把执行权限交给async函数外的主线程，等主线程执行完毕再执行。
await：类比promise的then函数来看，await后面要执行的同步代码其实本应该
就是写在then的回调函数里的，而await必须在async代码块中执行的原因，正是要创建一个类似于then函数参数中的回调函数的执行环境，这样就可以保证异步代码不会阻塞同步代码。所以async代码块中，await后面只写需要等待回调结果的代码，不相关的代码必须要写到async代码块以外的地方去。因为async代码块外的地方不会阻塞。
————————————————————————

结构赋值

参考： https://www.cnblogs.com/Shyno/p/12157457.html

let a={name:'小明',age:18}
    function wuKongYouLook({name,age}){
      console.log(name,age)
      }
      wuKongYouLook(a)//小明,18
      wuKongYouLook() //报错　　
//这里实际上是省略了一步,let {name,age} =a;即 let 形参 = 实参,所以就可以打印出name,age的值.而不给参数或者参数是undefined时,let {name,age}=null或者undefined都会报错　

3.仓库state应该有个起始值
state中数据默认初始值别瞎，看服务器返回对象还是返回数组。
4.mutations

const mutations = {
  CATEGORYLIST(state, categoryList) {
    state.categoryList = categoryList;
    console.log(state,'213456')
  },

5.查看

6.引入

import{mapState}from'vuex'


computed: {
     ...mapState({   
categoryList(state)=>{
//console.log(state)
//注入一个参数state，其实即为大仓库中的数据
return state.home.categoryList;
      //简化写
      //categoryList: (state) => state.home.categoryList,
    }),
  },