Vue笔记-Vuex入门教程

我的理解：

概述：state（存数据） getter（取出并修剪数据，类似computed） mutations&actions（增删改数据）

上半部分：

• state： 把数据（状态）都收集起来（发送给服务器的数据，接收的数据，用户输入的数据，需要计算的数据，一切的一切），是数据收集池

• mutations和actions： 这两个为什么一起说？因为两者功能都是一样的，都是对数据的修改（也叫状态修改），
  区别在于：
  一、mutations只能执行同步操作，而从服务器获取数据等异步操作就要交给actions，
  二、mutations是大哥，actions是二弟，只有大哥有修改state数据的权限，actions想要异步修改数据，要先给大哥mutations，大哥再给state

• getters： 可以认为是computed方法

下半部分：

这样，这四大金刚功能我们就知道了，知道功能，也就知道他们需要哪些变量或者方法了

getters写法以及需要的变量/方法：

①类似于computed方法，是对state里的数据加以修剪，所以需要state对象

export default{
    gettersName( state ){
    	//修剪state里的数据
    	return afterState  //把修剪完的数据返回出来，如果组件想用这个修剪完的，在组件内调用(...mapGetters)即可
    }
}

mutations写法以及需要的变量/方法：

• pre：先给此次修改起个名 -可以单独建一个js文件（type.js/mutation-type.js），用大写常量表示
• ①修改数据 -至少需要拿到数据吧，所以需要state对象
• ②接收actions传来的数据（可以不写） -这个数据官网叫payload
• after：数据修改后传state -直接点语法就能修改了

export default{
    [ mutation-type (大写字符串) ] (state, { resultData } ) {   //resultData要和actions传过来的数据名称一致
        //拿到actions传过来的数据放进state池子里面
        state.resultData = resultData
    }
}

actions写法以及需要的变量/方法：

• ①先给此次修改起个名 -驼峰命名
• ②异步操作需要上传和接收的数据 - 上传需要用到state，所以需要传入state
• ③修改数据只能commit给mutation -需要commit方法

export default{
    getNews({commit,state},payload){   //payload是需要从组件内获取一并发往服务器的数据
        //一通异步操作（ajax），得到结果resultData
        commit(GET_NEWS,{resultData})
    }
}

备注：

1. actions接受的是context方法，包括
   context.commit，
   context.getters,
   context.state
2. 组件内this.$store.dispatch(action名，需要传入的数据)可以触发action

映射写法：

mapActions([])

methods:{
    ...mapActions(['getAddress'])
}
//怎么用？
 mounted(){
    this.getAddress()
},

mapState([state里的属性名])

computed:{
    ...mapState(['address'])  
}
//怎么用？
mounted(){
    console.log(this.address)
}

mapGetters([getters里的计算后属性名])

 coumputed:{
     ...mapGetters(['afterCounted')])
 }
    //怎么用？
mounted(){
    console.log(this.afterCounted)
}

mapMutations([mutations里的方法名（写成对象也行）])

 methods:{
 //可以这样写：
     ...mapMutations(['addFunction')])
 //这样写怎么用？
 mounted(){
     this.addFunction()
 }
 
 //也可以这样写
     ...mapMutations({add:
         'addFunction'})
 }
 //那这样写又怎么用？
 mounted(){
     this.add()
 }