vuex是官方提供一个插件,状态管理库,集中式管理项目中组件共用的数据。
不是全部项目都需要vuex,如果项目很小,完全不需要vuex,如果项目很大,组件很多、数据很多,数据维护很费劲就使用。
state
mutations
actions
getters
modules
在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
}
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作为一个关键字放到函数前面,用于表示函数是一个异步函数。异步函数也就意味着该函数的执行不会阻塞后面代码的执行。
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')
},
import{mapState}from'vuex'
computed: {
...mapState({
categoryList(state)=>{
//console.log(state)
//注入一个参数state,其实即为大仓库中的数据
return state.home.categoryList;
//简化写
//categoryList: (state) => state.home.categoryList,
}),
},