Vuex

// 在组件内部调用store的commit方法，修改mutation的操作
mounted(){
  setInterval(()=>{
    this.$store.commit('updateCount',i++);
  },1000)
}

// store.js文件
//写法一：错误，每次用同一个store，会有内存溢出的风险
const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    updateCount(state,num){
      state.count=num
    }
  }
})
// 方法二：正确
export default ()=>{
  return new Vuex.Store({
    state:{
      count:0
    },
    mutations:{
      updateCount(state,num){
        state.count=num
      }
    }
  })
}

getter

// getters 相当于 computed
// mapState,mapGetters 是帮助方法，用法如下
import {mapState,mapGetters,mapActions,mapMutations } from 'vuex'
computed:{
 ...mapState(['count']), //可以 获取到count的值, 同名的情况
 ...mapState(
   counter:'count'
 ), //可以 获取到count的值，不同名的情况
}

mutation and action

// 组件内部
mounted() {
  // mutation 是专门用来修改data的数据的
  // 传值 this.$store.count = 3;
  // this.$store.commit('update',i++);   // commit 触发 mutation，dispatch 触发 action
   this.$store.commit('updateCount',{
    num: i++,
    num2:2
  })
} 
// mutations.js
export default {
  // 最多接收两个参数，一个是名称，一个是对象（如果只有一个，可以 直接传）
  updateCount(state,{num,num2})｛
    
  ｝
}

// actions // mutation是同步操作，如果异步的代码必须放在 action 里
updateCountSync(sotre, data){} // 第一个参数是store对象，第二个是传的值

• 获取sate的值

1. this.$store.state loginState
2. 如果需要处理一下数据，可以用这种方式.
computed:{
    count(){
        return this.$store.state.count
    }
}

• 获取mutations的值

1. this.$store.commit('update', '参数')
2. mutations 只能接受两个参数，第二个是对象

• actions 处理一些异步修改数据的方法，同步的用mutations
• 触发 actions 的方式：this.$store.dispatch('update')

this.$store.commit('update', {num:datqa.num});

let api = {
    getLessonListItem: 'getLessonListItem'
}

async function getLessonList(req) {
    const res = await Vue.http.post(api.getLessonListItem, req)
    return res.data.data;
}

export default new Vuex.Store({
  state: {
    visibleLogin: false,
    lessonList: [],
    lessonItemInfo:[]
  },
  mutations: {
    // 修改state
    updatelogin (state, value) {
      state.visibleLogin = value
    }
  },
  actions: {
    async getLessonListItem({commit}, payload){
      const result = await Api.getLessonList(payload)
      commit('getLessonList', result)
    }
  }
})

api 页面

import Vue from 'vue'
const api = {
    deleteLesson : `${BASE_PATH}/deleteLesson`,
    upload : `${BASE_PATH}/upload`,
    saveLesson: `${BASE_PATH}/saveLesson`,
}

async function getLessonList(req) {
    const res = await Vue.http.post(api.getLessonListItem, req)
    return res.data.data;
}

async function getLessonItemInfo(id) {
    const url = api.getLessonItemInfo + `?id=${id}`;
    const res = await Vue.http.get(url)
    return res.data.data;
}

async function login(req) {
    const res = await Vue.http.post(api.login, req)
    return res;
}

export default {
    getLessonList
}