vuex基础语法

// import Vuex from "vuex";
// import Vue from "vue";
// Vue.use(Vuex);
// /* 
// vuex作用:数据共享
// 用法:在store新建一个js文件;new Vuex.Store
// 方法:
// state:初始状态数据
// mutations:监控数据的变化
// 流程:state仓库---UI---mutations(提交方法:commit)
// 注意:必须提交mutations(提交方法:commit);不能处理异步场景 :   this.$store.commit("decrease")
// actions:执行异步场景方法
// 流程:state仓库---ul显示---actions等待处理---提交mutations(提交方法:dispatch):  this.$store.dispatch('asyncIncrease')

//  */
// const store = new Vuex.Store({
//   //仓库配置
//   state: {
//     //仓库初状态(数据)
//     count: 0,
//   },
//   //数据有了变化
//   mutations: {
//     //加1
//     increase(state) {
//       state.count++;
//     },
//     //-1
//     decrease(state) {
//       state.count--;
//     },
//     //count乘几次幂
//     //payload:负荷,负载
//     power(state, payload) {
//       state.count **= payload;
//     },
//   },
//   //如果需要处理异步场景,需要在该方法内进行
//   actions:{
//     asyncIncrease(ctx){
//         setTimeout(()=>{
//             ctx.commit("increase");
//         },1000)
//     },
//     asyncDecrease(ctx){
//         setTimeout(()=>{
//             ctx.commit('decrease')
//         },1000)
//     },
//     asyncPower(ctx,payload){
//         setTimeout(()=>{
//             ctx.commit('power',payload)
//         },1000)
//     }
//   },
// });
// window.store = store;
// export default store;

  

posted on 2023-06-14 08:56  爱前端的小魏  阅读(22)  评论(0编辑  收藏  举报

导航