vuex详解

1.组件内可以直接修改State数据，但是这样子改的话，devtools无法记录是哪个组件修改的State数据，对后期的调试非常不友好；因此需要通过actions,mutations对vuex做修改；

2.可以在组件内直接通过mutations对state数据进行修改，如果是异步的话无法通过跟踪mutation获取devtools记录，所以异步的话需要actions，再mutations来修改state内数据；

3.mutations提交数据

//目录:store/index.js
state: {
    counter : 1000,
    movies : [
      {mName : '无极',price : 20},
      {mName : '阿甘正传', price : 30},
      {mName : '1900', price : 40},
      {mName : '美丽心灵', price : 50}
    ]
  },
  mutations: {
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    },
    //普通提交风格
    incrementParam(state,param){
      state.counter+=param
    },
    //特殊提交风格
    incrementParam2(state,payload){
      console.log(payload);
      state.counter+=payload.param
    },
    pushMovies(state,obj){
      state.movies.push(obj)
    },
    yxMut(state){
      state.yx.player="梁朝伟"
      //往state对象数据内添加属性
      state.yx.player2="张曼玉"
      //删除state对象数据内属性
      delete state.yx.player
    }
  },

//组件内调用
add(){
   this.$store.commit("increment")
},
multi(){
  this.$store.commit("decrement")
},
addParam(param){
  //普通提交风格
  this.$store.commit("incrementParam",param)
},
addParam2(param){
  //特殊提交风格
  this.$store.commit({
     type : "incrementParam2",
     param,
     param2 : '无极'
  })
},
//传递多个参数,将参数封装到对象中
addMovies(){
   let obj={mName : '末代皇帝',price:10 }
   this.$store.commit("pushMovies",obj)
}

4.mutation的类型常量

//路径: store/mutation-types.js
export const TEST="test"

//路径:store/index.js
import { TEST } from "./mutation-types"
mutations: {
    [TEST](state){
      console.log("dosomething");
    }
}

//组件内调用
import { TEST } from "./store/mutation-types"
click(){
   this.$store.commit(TEST)
}

5.getters基本用法

类似于computed:

//目录路径:store/index.js
export default createStore({
  state: {
    counter : 1000
  },
  getters : {
    counterPow(state){
      return state.counter*state.counter
    },
    moviesFilter(state){
      return state.movies.filter(s=>s.price<=30)
    },
    //调用getters的方法
    moviesFilterLen(state,getters){
      return getters.moviesFilter.length
    },
    //往getters函数传参
    priceFilter(state){
      return function(price){
        return state.movies.filter(s=>s.price>price)
      }
    }
  },
})

//组件内调用
<h4>getters : {{ $store.getters.counterPow }}</h4>
<h4>myMovies : {{ $store.getters.moviesFilter }}</h4>
<h4>个数:{{ $store.getters.moviesFilterLen }}</h4>
<h4>priceFilter : {{ $store.getters.priceFilter(25) }}</h4>

6.actions基本使用

//目录路径:store/index.js
export default createStore({
  state: {
    info : "星际穿越"
  },
  mutations: {
    updateInfo(state,payload){
      state.info=payload.name
    }
  },
  actions: {
    aUpdateInfo(context,payload){
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          context.commit("updateInfo",payload)
          resolve("执行成功")
        },1000)
      })
    }
  },
})

//组件内调用
change(){
      this.$store.dispatch("aUpdateInfo",{name : '金刚川'}).then((res)=>{
        console.log(res);
      })
    },

7.modules分模块

const moduleA={
  state : {
    info : '敦刻尔克'
  },
  mutations : {
    updateInfoA(state,payload){
      state.info=payload.name
    }
  },
  //modules内的actions有作用域，只能调用模块内的mutations
  actions : {
    maUpdateInfo(context,payload){
      setTimeout(()=>{
        context.commit("updateInfoA",payload)
      },1000)
    }
  },
  getters : {
    players(state){
      return state.info+":吴京"
    },
    players2(state,getters){
      return getters.players+",段奕宏"
    },
    players3(state,getters,rootState){
      console.log(rootState);
      return getters.players2+","+rootState.player
    }
  },
}

//根模块内
modules: {
    a : moduleA
  }

//组件内调用
change2(){
   this.$store.commit("updateInfoA",{name : '长津湖'})
},
change3(){
   this.$store.dispatch("maUpdateInfo",{name : '无间道'})
}

8.vuex目录结构分割

import mutations from './mutations'
import moduleA from './modules/moduleA'
import actions from './actions'
const state={
  info : "星际穿越",
  player : '张涵予'
}

export default createStore({
  state: state,
  mutations: mutations,
  actions: actions,
  modules: {
    a : moduleA
  }
})

9.mapGetters使用

遍历出getters，转换成计算属性使用

import { mapGetters } from "vuex"
computed : {
        //方式一
        //...mapGetters(["cartLen","cartList"])     

        //方式二   
        ...mapGetters({
            len : "cartLen",
            list : 'cartList'
        })
    }

10.mapActions使用

遍历出actions，转换成methods方法

methods : {
        //方式一
        //...mapActions(["addCartList"]),

        //方式二
        ...mapActions({
            addCartList : 'addCartList'
        }),
}



//调用
addCart(){
       this.addCartList(this.goodsDetailData).then(res=>{
       console.log(res);
   })
}