VUEXVUEX学习笔记-整理
※标题VUEX的作用
- 组件之间可以更方便的共享数据
- 进行数据管理更加方便(或者说是状态管理)
- 为项目提供一个公共内存, 可以给这个内存提交数据, 也可以从内存中取数据
1.0.0如何使用VUEX呢?
- 1.0.1初始化Store对象 文件所在位置src/store/index.js
( 如果使用脚手架直接生成的项目勾选了vuex的话基本上会直接生成以下内容)
//关于store属性的介绍
export default new Vuex.Store({
state: {},// 专门用来定义数据
// 专门用来定义修改数据的方法
mutations: {},// 定义的方法,默认会接收state参数,来访问state中的数据
actions: {}, // actions中定义的异步方法,默认接收context参数,这个参数类似于Vuex.Store对象实例
getters: {},// 默认会接收state参数,来访问state中的数据
// vuex中的getters类似于vue中的计算属性
})
- 1.0.把Store挂载到全局 通过Vue.use(Vuex)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
- 1.0.3到这里就可以使用vuex了
※2.0.1回顾初学vue时,是怎么进行数组之间的传参的
1. 父组件 → 子组件 || 自定义属性
- 子组件props接收
- 父组件在子组件标签通过
:参数名="参数数据"
2. 子组件 → 父组件 || 自定义事件
- 子组件绑定响应时间通过
this.$emit('父组件自定义事件名','传递的参数')
- 父组件在子组件标签通过 @父组件自定义事件名=’'父组件自定义事件"
- 子组件是通过
this.$emit
运行了父组件相应的自定义事件
3. 子组件 → 子组件 || 事件中心EventBus
- 新建 src/EventBus/index.js 直接导出空白vue对象
- import Vue from 'vue' // 导出空白vue对象
- export default new Vue()
- 子组件双方引入 文件 import eventBus from ‘…/EventBus’
- 触发方,通过触发条件调用方法,通过
eventBus.$emit
绑定接收方事件名
//触发方
subFn(){
this.$emit('subprice', this.index, 1) // 子向父
eventBus.$emit("send", this.index, 1) // 跨组件通过eventBus寻找相应的send事件
}
-接收方,通过 eventBus.$emit
来监听相应的时间是否被触发
created() {
eventBus.$on("send", (index, price) => {
console.log(index+price);
});
-组件传参的会议结束
VUEX几个属性的介绍及其基本使用
state
定义一个数据
用法和作用类似vue实例中的data
使用这个数据
基本方式
$store.state.数据名称
第二种方式
导入mapState
在计算属性中使用mapState
模板中可以直接使用计算属性
扩展运算符可以展开对象
第二种种方式的使用
<template>
<div>
<h1>我是two</h1>
<p>{{ number }}</p>//3.使用
<button>点我增加</button>
</div>
</template>
<script>
import { mapState } from "vuex";//1.引入
export default {
computed: {
...mapState(['number']),//2.注册 想要使用的变量
},
};
</script>
mutations
不能使用state直接修改数据
定义方法, 参数为state对象, 在方法内部修改数据
触发方法, 执行修改操作
基本方式
this.$store.commit('add')
<button @click="changeCount">修改vuex中的数据</button>
第二种方式
导入mapMutations
在methods中使用mapMutations
模板中直接调用方法即可
函数传参
commit的时候传递参数, mutations定义的方法接收参数即可
注意: 只能接收一个参数. 如果想传递多个参数, 可以放在一个对象中来传递
actions
不能在mutation中处理异步任务
虽然修改state能够成功, 但vue-dev-tools无法同步调试
定义异步方法, 参数为context对象
触发方法
基本方式
this.$store.dispatch('addAsync')
第二种方式
导入mapActions
在methods中使用mapActions
模板中直接调用方法即可
函数传参
dispatch的时候传递参数, actions定义的方法接收参数即可
注意: 只能接收一个参数. 如果想传递多个参数, 可以放在一个对象中来传递
注意: 异步方法中如果要修改数据, 仍然要调用mutations中声明的方法
getters
作用: 当读取的值需要进一步处理之后再返回时, 可以用getters, 有点像计算属性
定义一个方法, 接收state作为参数, return返回处理完成的结果
使用方式
基本使用
$store.getters.showNum
第二种方式
导入mapGetters
在计算属性中使用mapGetters