vue学习91-105

vue的基本认知p91

创建一个空仓库p93

vue 路由 vuex版本
2 3 3
3 4 4

npm的vuex装包npm install vuex --save
vuex里有仓库,仓库放vuex核心代码，所有组件都能访问到

const store =new Vuex.Store()

//访问stored
this.$store

如何提供$访问vuex的数据p94

核心概念-state状态

1. 提供数据
   
2. 如何使用
   (1)通过store直接访问
   
   (2)通过辅助函数（简化）
   

核心概念-mutations

目标：明确vuex同样可以遵循单向数据流，组件中不能直接修改仓库的数据
通过strict:true可以开启严格模式
//错误代码不会监测，监测需要成本，所以要开strict:true（上线时需要关闭）

核心概念-mutations（修改仓库数据） P95

1. 定义mutations对象，对象中存放修改state的方法
   
   第一个参数是当前store的state函属性
   
   mutations不支持多个参数，有且只能有一个参数，如果需要多个，包装成一个对象
   修改仓库的数据不能用v-model，遵循单项数据流所以:value和@target要分开写
   字符串转数字前面加+号
   

辅助函数：MapMutations P96

mapstate映射计算属性，mapmutations映射methods组件

核心概念-actionsP97

actions

mutations的函数写action里面
action处理异步，不能直接处理state，需要commit mutation
actions是方法
context 上下文
context.commit(‘mutation名字’，额外参数)

辅助函数-mapactions

核心概念-getters

state派生状态要依赖state，会用到getters
(1)getter函数第一个参数是state
(2)getters函数必须要有返回值
getters的辅助函数是计算属性

mapmutations和mapactions都是映射方法
mapstate和mapgetters都是映射属性

核心概念-模块module(进阶语法)-模块创建P98

把store对象state拆了

核心概念-模块module(进阶语法)-访问模块中的state$mutationsP99

state部分

属性映射直接映射整个state分模块

所以直接子模块映射mapState(‘模块名’，[‘xxx’])比较好（前提是开namespace）

getters部分

访问模块名getters的 不能直接用.得到

必须改成这样，加上中括号

mudule部分

第一种直接来store调用比较难以维护，不建议用，必须打开命名空间才会挂载到子模块

actions部分

和mutations有差异的是第一种store直接调用的语法