2020,12,30
辅助函数 mapState
1.导入
2.采用数组形式引入state mapState(['count]) 类似于 count(){ return this.$store.count}
3.用延展运算符 将导出的状态映射给computed computed:{...mapState(['count'])}
今天的目标
- 简单的描述一下vuex的一些特性(5个单词)？以及在项目里面的使用场景？
- vue是一个数据驱动视图的一个框架； 数据就是我们vue的核心。 后面我们说数据就是说的状态；为了和react里面的一些东西接轨
- vue里面的组件之间的数据通信？ 父子传值， 事件总线， vuex相当于是一个数据仓库，任何组件要获取和设置数据都去仓库里面做
- $nextTick 作用？ 等dom更新以后再调用它的回调函数； —告诉我们 vue里面 dom更新 也是异步
- $set
State
- 提供全局唯一的公共数据源
- 访问全局状态的两种方法
1. 使用 this.$store.state.xxxx
2. 使用辅助函数的方法去访问， mapState
在组件里面定义计算属性的方式 …mapState([‘count’]) 这句话的意思就是将 state上面的值映射为当前组件的 计算属性
Getters
- 主要是堆state里面的数据 有一个包装或者修饰的作用， 并不会改变state上面原始的数据； 类似于vue里面的计算属性
使用方式 this.$store.getters.xxx
使用辅助函数的方式 直接在页面上使用这个技术属性， 但是要现在页面里面定义 mapGetters([‘xxx’])
Mutation
- 全局的数据，使用的方式，显示的方式是 this.$store.state.count
- 如果要对store里面的数据进行修改， 比如我们有10个组件，都访问这个数据， 有5个组件想修改这个公共的数据 this.$store.state.count ++
- 在工作里面，我们对与stroe上面的数据逇更改，一定要交给唯一的一个全局功能的函数，卸载mutation里面
- 在组件里面，怎么样去修改全局的状态值 this.$store.commit(‘写我们定义的方法名称’)
- 在vuex里面，修改全局数据唯一的方法就是 提交 mutation
Action
-
对于异步的数据的操作，mutation处理不了，只能选择action
-
但是最终的action里面，要修改数据，还是要调用mutation里面的函数
在action 的函数里面，这样写我们的异步函数
fnAsync(context){
setTimeout(()=>{
// 在这个里面再滴哦阿勇mutation去修改我们的额 state上面的值
context.commit(‘提交一个mutation’)
}, 1000)
}// 上面是定义action的地方； 在组件里面调用action this.$store.dispatch('ation的名称')
module模块
常用的几种方式和简写 mapState，mapMutation，mapAction
访问数据 this.$store.state.count
辅助函数简写 this.count --------- 必须先计算属性computed定一个辅助函数 mapState(['count'])
同步修改数据
修改数据是 this.$store.commit("mutation里面函数的名称")
辅助函数简写 this.函数名称() --- 必须在methods里面 定一个辅助函数 mapMutation(['函数名称'])
异步修改数据
修改数据 this.$store.dispatch("action里面定义的方法")
辅助函数简写 this.函数名称() ---- 必须要在methods 定义一个辅助函数 mapAction(['函数名称'])
写项目中带有vuex的时候，基本的思路
- 修改一个值的时候
1. 肯定是在组件里面， 去找你的那一个操作会触发这次的修改， 给按钮绑定一个事件，在事件的里面 触发一个提交， commit一个mutation
2. 肯定要去store.js这个文件里面， 定一个mutation，对我们的数据进行修改 - 删除的功能
1. 只要涉及到删除的功能， 就会涉及到 splice 函数； 有了这个函数， 就要想怎么样获取索引号，从什么位置开始删 arr.splice(index,1)
2. 90%的删除情况，都是根据当前数据对象的id值来的， 我们id怎么来？ 点击删除按钮的时候， 就会得到当前删除按钮所在行的 那一整个对象
3. 然后再页面函数@click绑定的地方，将我们的id传递到对应的事件处理函数
