VueX状态管理
-
State:
vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；
创建vuex实例
const store = new vuex.store({
state: {
count:1
}
})
在组件直接使用
举栗:
<h2>{{this.$store.state.count}}</h2>
`然后在页面上就可以看到 1`
- Getters:
Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果，这里我们修改Hello World.vue文件如下：
state：存储状态（变量）
getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
actions：异步操作。在组件中使用是$store.dispath('')
modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
vuex组件通信(是基于vue开发的)
总结
同步修改和异步修改
同步修改可以直接通过 mutation -state-components-调试工具
异步修改通过-action-state-components--调试工具
计算属性 computed
调用属性：返回一个函数
不能当函数使用的：计算属性
计算属性基于它们的响应式依赖进行缓存
~
~
~
非组件中获取通过this.$store.数据名
~
~
vuex使用方式：
方式1
- 将
共享的数据放到容器store中 - 不需要共享还是放到组件内部
方式2： - 将所有的
数据状态都放到容器store中 - 容器中的数据非常方便调试，但是也会带来开发繁琐
不要滥用vuex、推荐方式1，能父子的就父子，非父子的使用vuex
大量的非父子通信使用vuex
计算属性方法 单个计算属性
1、 创建容器实例store
2 、容器的状态state里写数据(驱动视图更新的数据)
3、 computed如同 methods，用来修改 state数据状态的
计算属性 简写方式
1、mapState 辅助函数
修改容器中的数据
正确做法：通过mutation修改数据状态
注意-注意-注意：mutation 中不能只能修改 state里的数据
执行异步
如果需要执行异步操作修改 state状态，则：使用 action
1、 在 action 中做两件事儿：1 执行异步 2 提交mutation修改容器状态
2、 注意：不要在 action 中直接修改容器状态，无法被调试工具观测记录到
3、 因为调试工具只能记录 mutation 的历史改变
1、使用mutations如同 methods，用来修改 state数据状态的
通过事件点击改变store里的数据 @click="store.state.count }}
2、getters:{} 相当于computed vue里的计算属性 ===监听器
直接实现结果<p>{{ $store.getters.getterschangecout}}</p>
小知识
1、filter过滤，过滤这个计算属性的数据
步骤：
1、安装、搭建脚手架
2、git建立关系
线上创建一个仓库(空的)
git status 查看状态
git remote add origin 复制地址
git push -u origin li
1、删除app
- App.vue 、定义出口#app、写路由出口、样式设置局部样式 完成
2、新建router文件、复制 完成
3、新建store文件、复制 完成
4、views两个vue组件删除 完成
5、新建文件、、、dir 、fileter、样式、utils、创建\ 看 文档结果
6、重启服务看下有没有报错(页面)、提交git--调整目录结构
6、vant(杭州有赞开发的)--导入vant
- 安装: npm i vant---重启服务器
方式一：推荐的按需引入(可以看下官方文档) - npm i babel-plugin-import -D
配置：---创建文件：babel.config.js====复制
使用引入全局： import {button,.. ,.. ,..} from 'vant' //这里引入的button组件
引入样式。。。。。
Vue.ser（）
直接在
