本笔记是看b站codewhy老师的视频做的笔记，大家可以一起学习，个人觉得他讲课很好，不光可以听到新知识，还可以复习旧知识，简直美滋滋。视频地址是
干啥的？
vuex是状态管理工具 状态管理：很多组件之间的状态（可以理解为变量）需要共享的话，就需要管理。
什么时候需要状态管理
登录状态，用户名，地理位置等等，购物车。
简单使用
- 新建一个store的文件夹，然后里边创建index.js
import Vue from 'vue'
import Vuex from 'vuex'
// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.Store({
state:{
counter:1000
},
mutations:{
},
actiions:{
},
})
export default store
- 新建一个组件
- App.vue中修改
- 最终结果
修改vuex中的数据
当我们想修改vuex中数据的时候，我们虽然可以通过$store.state.某个值来修改，但是这样就不能检测出来哪一步都是谁改的了，调试的时候很麻烦。修改数据要这样修改
- 在store/index.js中修改mutations的值
- 在App.vue修改的时候要用commit
vuex核心概念
- state
- 放状态信息
- 单一状态树（single source of truth）：vuex只使用一个store，不要使用多个。
- getters类似计算属性
- 把数据变化后再给别人，一般用getters
- getters调用自己
- gettres返回函数
- mutation
- mutation是更新state的唯一方法
- 带参数的传递(payload负载)
- action异步操作
- module模块
vue数据响应式原理
- state中的属性都是加入到响应式系统中
- 有些情况是可以响应的有些不可以。但是响应式有前提，必须提前定义好的才能相应，就是修改名字啥的之类可以改，但是你新加一个没有的东西，就不会响应式。
state.info['add'] = '洛杉矶'//这个不是响应式，
//要想变成响应式的话，就要按照下面这个方法写：
Vue.set(state.info,'add','洛杉矶')
- 删除
delete state.age //这个是不响应的。
Vue.delete(state.info,'age') //这样写才能响应
类型常量
可以在store中写一个mutations-type.js然后里边定义东西,例如:
export const INCREMENT = 'increment'
然后在用的时候，大家都用这个常量来写东西，就会减少错误的发生。 使用方法： 定义函数的时候：
[INCRMENT](state){
//这里还是以前的代码
}
调用函数的时候:
this.store.commit(INCREMENT) //直接写INCREMENT就行了
action异步操作
异步操作必须要用action，不能用mutation来做异步操作
基本使用方法
module
当你需要单独抽离一些东西的时候，我们需要用到module
modules:{
aaa:{
state:{},
mutations:{},
actions:{}
},
bbb:{
state:{},
...
}
页面展示的时候： 注意.aaa的位置
项目结构的设计（store）
对象的解构：
const obj (){
name:'xiaolu',
age:18,
height:1.88
}
//以上是定义的，以下是取数据。
const {age,name,height} = obj;
项目解构划分
