vuex辅助函数的使用,vuex常用方法
vuex 的使用，中大型项目必备
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
主要包括以下几个模块：
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
vuex的基本使用
作用 ：
它采用集中式存储管理应用的所有组件的状态。（统一管理所有组件中公用的数据）
组成：
state：管理所有的状态（数据）
getter：state 的计算属性
mutations：用来操作 state
用法 ：
1.0 定义
// 在 store/index.js 中
export default new Vuex.Store ({state:{userInfo:''}})
2.0 使用
// 在 .vue(组件) 中
// // 取值
this.$store.state.userInfo
// // 赋值
this.$store.state.userInfo={}
总结：
在 vuex 中，如果要给 vuex 中的数据赋值，不能直接得到 state 去赋值，这样不配合 vuex 设计规范
vuex - mapState 基本使用
它是 vuex 中 state 对应的一个辅助函数
mapState：可以用来简化 vuex 中 state 中属性的使用
步骤：
导入
import { mapState } from 'vuex'
定义
computed:{...mapState(["state中的属性名"])}
使用
this.state中的属性名 ===?this.$store.state.state中的属性名
vuex - mutations 的使用
在?vuex?中，如果要给?state?中的属性赋值，建议大家借助?mutation?来赋值
步骤：
1.0 在?mutations?中定义赋值方法
// 在 store/index.js 中
export? default? new? Vuex.Store({
????state: { userInfo: ' ' },
????mutations: { setUserInfo ( state, payload ) {
????????????state.userInfo = payload
????}
}})
2.0 在组件中调用方法
// 在 .vue(组件) 中
?// 取值
this.$store.state.userInfo
?// 赋值
this.$store.commit('setUserInfo', data)
vuex - mapMutaions 基本使用
mapMutaions ： 可能用来简化 vuex 中的 mutations 中方法的调用
步骤：
导入?mapMutations
import { mapMutaions } from 'vuex'
定义方法：
methods:{...mapMutations(['setUserInfo'])}
使用方法：
this.setUserInfo('abc')
总结：
vuex：
state：管理状态
取值：
this.$store.state.xxx
...mapState(['xxx'])? 或者? ...mapState({ myname: 'xxx' })
mutaions
取值：
this.$store.commit('xxx', payload)
...mapMutations(['xxx'])? 或者? ...mapMutations({ myname: 'xxx' })
vuex组件通信
在组件直接使用
总结
~
~
~
非组件中获取通过this.$store.数据名
~
~
vuex使用方式：
方式1
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、filter过滤，过滤这个计算属性的数据
步骤：
1、安装、搭建脚手架
线上创建一个仓库(空的)
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