二、vuex

二、vuex

vuex:状态（变量）管理器，集中存储管理。需要多个组件共享的变量全部存储在一个对象里，把这个对象放在顶层的Vue实例里。可以做到响应式

• 安装 npm install vuex --save

• vuex的state里管理的变量最好通过mutations来action。

import Vuex from 'vuex'
///1.安装插件vuex
Vue.use(Vuex)
//2.创建对象
const store = new Vuex.Store({//Store大写
  state:{//放状态信息
    sum:10000,
    counter:99


    },
  mutations:{
      increment(state){
        state.counter++
      },
      decrement(state){
        state.counter--
      }
  },
  actions:{

  },
  modules:{

  },
  gettes:{

  }
})

state单一状态树

一个项目一个store

getters

类似Vue实例计算属性computed

mutations方法

• vuex的store状态 state改变更新的唯一方式就是提交commit mutations,是普通的提交方法

add(){
      this.$store.commit('increment')
    },

• mutations包含两个内容：

  • 字符串的事件类型
  • 回调函数

  increment(state){
    state.counter++
  },
  increment就是字符串，(state){ state.counter++}是回调函数。该回调函数的第一个参数就是state
  

  • 参数：在通过mutation更新数据时，携带一些额外的参数

  addcount(count){
    this.$store.commit('incrementcount',count)
  }
  

  • 如果是多个参数：可以写成对象

  addstu(){
    const stu = {name:'e',age:24,heigth:1.68}
    this.$store.commit('incrementstu',stu)
    }
  

• mutation的特殊提交封装

//特殊提交方法
    addstu(){
      const stu = {name:'e',age:24,heigth:1.68}
      this.$store.commit(
        {
          type:'incrementstu',
          stu
        }
      )
    }
    
    
    //特殊的提交方法
      incrementstu(state,payload){//参数要写payload！！！
        state.students.push(payload.stu)
      }
    },

• mutations响应规则

  • state的数据发生改变时，vue组件就会自动更新
  • 所以要先在state里初始化需要的属性。会自动观察watch这些属性的变化并更新

• mutations的常量类型

   //书写格式
   //新建一个js文件
   export const  INCREMENT ='increment'
  /app.vue
  add(){
    this.$store.commit(INCREMENT)
  },
  //store的index.js里面
  [INCREMENT](state){
            state.counter++
          },
          
  

• mutations同步函数

  • 通常情况下vuex会要求我们mutations的方法是同步方法
  • 在用devtools调试时，可以用devtools来捕捉mutation快照
  • 如果是异步操作，devtools不能很好的跟踪这个操作会是什么时候完成

action

action类似mutation，用来替代mutation进行异步操作

context 上下文

actions:{
  aupdateInfo(context,payload){
          // setTimeout(()=>{
          //   context.commit('updateInfo')
          //   console.log(payload.message);
          //   payload.success()
          // },1000)
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
      //context上下文指代store
        context.commit('updateInfo')
        //与mutations 不同，因为修改state只能通过mutations
        //所以context.commit到mutations,执行mutation的方法
        console.log(payload);
        resolve('1111')
      },1000)
    })
  }
},

        //在app.vue 里，与mutation不同，用dispath执行action里的方法
ayscupdateName(){
  this.$store.dispatch('aupdateName')
}

官方给出的逻辑图

getters

模块里的getters里的函数可以有一个参数rootState，即store对象里的state。

fullName3(state,getters,rootState){//
  return getters.fullName2+rootState.counter
}

modules

避免state变得臃肿，可以用module划分store为多个模块，每个模块有自己的state，mutations

vue的哪些方法是响应式？复习

• pop/push/splice替换/vue.set()

vue-devtools

vue开发的浏览器扩展工具调试工具安装https://blog.csdn.net/weixin_38654336/article/details/80790698

在chorm里的插件

每个模块有自己的state，mutations

vue的哪些方法是响应式？复习

• pop/push/splice替换/vue.set()

vue-devtools

vue开发的浏览器扩展工具调试工具安装https://blog.csdn.net/weixin_38654336/article/details/80790698

在chorm里的插件