VUEX学习笔记-整理

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