总结一Ajax异步复习vuex购物车案例

1.Ajax操作是异步的，相当于邮局

为什么要使用Ajax
在没有使用ajax技术时，前端要和服务器做交互是一个一来一回的过程。在前端通过HTTP协议向服务器发送请求时，要等待服务器的回应才能做下一步的操作，这给与了用户很不好的体验感。

什么Ajax
ajax是前端异步请求后台数据的技术，能做到在前端不刷新网页的情况下，获取后台数据在前端做显示，能给与用户很好的体验感。

参考文章：
Ajax异步请求
Ajax异步请求原理和过程

2.vuex知识点

结论

1. 修改state状态必须通过mutations
2. mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
3. 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
4. state的状态即共享数据可以在组件中引用
5. 组件中可以调用action

关于vuex的介绍—自己的笔记
以前的视频

smile老师的vuex博客笔记视频链接

一些知识点：
1.Vue.use(Vuex) Vue实例原型上添加$store属性

new Vue({
  render: h => h(App),
  // new Vue也提前留了一个属性叫store，可以提前放入你创建的store对象
  // 让vue项目拥有vuex功能
  //Vue原型上$store属性赋值
  store
}).$mount('#app')

2.Vue-初始化阶段

  data() {
    return {
      num: 0,
      b:this.num,
      c:this.$store.state.count
      //这样写是错误的undefinded，运行这行，才把变量的值挂到vue身上，不能访问this，
      //走完才有num,b,a,有点超前
      //后面一个可以是因为通过原型链找到$store
    }

注：data函数执行时，才给this身上添加data函数return对象里的属性
所以在里面this a或者this b 都是访问不到值的，没挂载你就要访问时undefined
记住不要在data函数里面写this。

3.可以在v-model绑定的值上面直接写$store.state.count吗？
不建议，vuex要求我们在mutations里面修改state状态（这样可以在调试工具里面追踪变化过程）

4.定义变量在computed：

<input type="text" v-model="count">

<script>
export default {
  computed: {
    count: {
      set(){},
      get(){
        return this.$store.state.count
      }
    }
  }
}
</script>

5.用辅助函数映射-获取state

<script>
// 需求1: 映射state到计算属性
// 1. 拿到辅助函数 mapState
// 2. 在computed内, ...mapState(['state变量名'])
// 3. 当计算属性使用

import { mapState } from 'vuex'

// let r = mapState(['count']) // 提取store里的state叫count的变量
// console.log(r); // 返回值: {count: 函数体(return state里count的值)}返回一个对象

export default {
  computed: {
    // 3.把映射过来的对象，展开放入到computed里 只有它的结构是对应的
    //count ：内置函数
    // 映射count, 得到对象展开, 合并到计算属性中 解构对象
    ...mapState(['count'])
    //传入映射的变量名 ...扩展运算符展开 key value留在原地
  },
}
</script>

6.复习扩展运算符 想当于外面括号去掉了，值留在原地
格局打开---值留在原地

let a=[1,2,3]
console.log(...a) //1,2,3 外面括号去掉了
let b=[...arr,4]
...作用就是把右边的值（对象/数组），结构打散，把值放到原地
相当于let b=[1,2,3,4]

7.定义mutations
mutations是唯一能修改state的地方, 确保调试工具可以追踪变化
mutations函数内, 只能写同步代码, 调试工具可追踪变化过程
因为调试工具要立刻产生一次记录, 所以必须是同步的
小结
mutations里函数作用?--------负责修改state里的数据
mutations只能写什么样的代码?--------同步流程的代码

mutations: {
		函数名 (state, 可选值) {
			// 同步修改state值代码
		}
	}

8.使用mutations的2种方式
方式1: 组件内 - 直接使用

语法:

this.$store.commit("mutations里的函数名", 具体值)

方式2: 组件内 - 映射使用

语法:

// 1. 拿到mapMutations辅助函数
import { mapMutations } from 'vuex'
export default {
    methods: {
        // 2. 把mutations里方法映射到原地
        //等价于原地有了一个方法
        ...mapMutations(['mutations里的函数名'])
    }
}

非父子组件互相传值/通信 本质是第三方包
异步操作：不必等待代码执行

9.actions定义-异步修改
（1）actions和mutations区别?====mutations里同步修改state，actions里放入异步操作

（2）actions是否能操作state?

不建议, 要commit给mutations(为调试工具可追踪)

（3）actions和mutations里函数, 第一个形参分别是什么?

mutations的是state，actions的是store

10.使用actions的2种方式
方式1: 组件内 - 直接使用

语法:

this.$store.dispatch('actions函数名', 具体值)

方式2: 组件内 - 映射使用

语法:

// 1. 拿到mapActions辅助函数
import { mapActions } from 'vuex'
export default {
    methods: {
        // 2. 把actions里方法映射到原地
        ...mapActions(['actions里的函数名'])
    }
}

注意：mutations和ations只能接受一个参数值（如果传递多个，请传递一个完整的对象）

3.重构购物车

李旭东老师代码笔记

（1）mapState可以改变映射到原地的计算属性名吗?

可以的, 格式…mapState({'‘计算属性名’, ‘state里要映射的变量名’})

数组形式映射 ---同名
    ...mapState(['goodsList'])
{ goodsList:  映射过来函数内部返回state下的goodsList} 

对象形式：
...mapState({list: 'goodsList'}) 
自定义原地属性名list, 映射vuex里的goodsList变量值

（2） 分模块 state要变成函数的写法 return 一个对象

定义modules

语法:
modules: {
    模块名: 模块对象
}

对象形式映射 自定义名＋函数格式

 computed: {
    //映射过来函数返回state
    //变量名： state=>state.模块名.变量名
    ...mapState({
      //自定义名＋函数格式
      //形参state就是vuex里根store里state
      list: state => state.cart.goodsList
    })
  },

(3)分模块-命名空间
目标：
防止多个模块之间, mutations/actions/getters的名字冲突

在模块对象内设置 namespaced: true

unknown local action type: asyncGetGoodsList, global type: cart/asyncGetGoodsList

报错原始是因为导入模块时忘记修改了，引用文件出错！！！