Vue2渐进式框架（七）Vuex

关注

原创 2022-04-08 18:23:33 401 阅读 AI 写同款· GEO 优化 ›

Vuex知识点梳理 Vuex 1.概念在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2.何时使用？多个组件需要共享数据时 3.搭建vuex环境创建文件：src/store/index.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备acti 阅读详情

第十九节

一、Vuex

1.1Vuex是什么？

Vuex是实现组件全局状态(数据)管理的一种机制，可以方便实现组件之间的数据共享；

1.2状态管理？

状态：就是Vue组件中data里面的属性，我们也将叫做数据。
管理：就是对于项目中数据的操作管理。

1.3管理什么状态呢？

用户的登录状态、地理位置信息、商品的收藏、购物车的物品；

二、单界面状态管理

在这里插入图片描述

2.1具体实现

在这里插入图片描述

三、多界面状态管理

当我们的应用遇到多个组件共享状态的时候，单向数据流的简洁性很容易被破坏；
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
在这里插入图片描述

3.1安装Vuex

新建store文件夹===>index.js

//1.引入Vue
import Vue from 'vue';
import Vuex from 'vuex';
//2.安装
Vue.use(Vuex);
const store = new Vuex.Store({
    //存储状态
    state:{
        //自定义共享状态
        count:0,
    },
    // Vuex中的Store状态（state）更新的唯一方式：提交Mutation
    mutations:{//定义mutations
        add(state){ //第一个参数就是state
			// this是store对象
			// console.log(this)
			state.count++
		},
    }
})
//导出
export default store

3.2main.js

来到main.js中，导入store对象，并且放在new Vue中
就可以通过this.$store的方式获取到这个store对象

3.3使用vuex中count(state中定义的共享状态)

this.$store.state.count
不能直接修改store中的状态，直接修改devtools侦听不到数据的修改。

3.4mutations 负责同步修改状态

Vuex的store修改状态唯一的方式：提交mutations
mutations:{ //定义mutations
	add(state){ //第一个参数就是state
		// this是store对象
		// console.log(this)
		
		state.count++
	}
}
在组件中进行提交mutations
  this.$store.commit("add")

四、mutation的提交方式与mutation的携带参数

在这里插入图片描述

第二十节

一、state

state属性是vuex管理的状态对象，里面会包含一些具体的状态，也即通用的数据；

二、Mutation

更改Vuex的store中的状态的唯一方法是提交mutation;
在这里插入图片描述

2.1Mutation携带参数

你可以向store.commit传入额外的参数，即mutation的载荷payload;
在这里插入图片描述

2.2Mutation提交风格

在这里插入图片描述

2.3Mutation注意事项

既然Vuex的store中的状态是响应式的，那么当我们变更状态时，监视状态的Vue组件也会自动更新。这也意味着Vuex需要遵守一些注意事项：
（1）最好提前在你的store中初始化好所有所需属性；
（2）当需要在对象上添加新属性时，你应该使用Vue.set(obj,‘newProp’,123)或者
在这里插入图片描述

三、Actions

Action类似于Mutation,不同的是：
1、Action提交的是mutation，而不是直接变更状态；
2、Action可以包含任意异步操作。在Vuex的使用过程中，我们可以将多个Mutation合并到一个Action中，也可以通过Action进行异步操作；

3.1actions基础用法

Action函数接收一个与store实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个mutation，或者通过context.state和context.getters来获取state和getters.Actions通过store.dispatch方法触发；
在这里插入图片描述

3.2携带参数与提交方式

Actions支持同样的载荷方式和对象方法进行分拨：
在这里插入图片描述

四、getters

4.1Getters Store中的计算属性

  // 计算count的平方
  quadratic(state){
	// 第一个参数，状态state
	return state.count*state.count
  },

4.2筛选数据

//筛选数据
    filterInfo(state){
      //age返回的不是一个不确定的值,而是一个函数
      return (age) => {
        return state.info.filter(res => res.age > age)
      }    
    },

4.3获取数据

在这里插入图片描述

4.4getters中的两个参数

在这里插入图片描述

第二十一节

一、Vuex辅助函数

vuex提供了四个铺筑函数，分别是mapState、mapGetters、mapMutations、mapActions.在Vuex中获取数据的辅助函数有两个mapState、mapGetters，操作Mutation和actionhas函数mapMutations、mapActions.

1.1mapState

首先引入 import {mapState} from 'vuex'

(一)普通使用

computed:mapState([//普通使用
   //属性名与vuex状态名相同 可使用数组的形式写
    "count",//将vuex中状态count映射到计算属性中(this.$store.count)
    "user"
])

(二)对象的形式使用

   //以对象的形式使用
   // computed:mapState({
   //     cuser(state){
   //         //通过计算属性的第一个函数 是vuex中的状态state，所以可以通过state直接获取数据
   //         return state.user
   //     },
   //     //简写方式
   //     csuser:state => state.user,
   //     cnum:"count"
   // })
   computed:{
       //组件自己的计算属性
       cPrice(){
           return "$" + this.price
       },
       //使用对象展开运算符...解构
       ...mapState({
           cuser(state){
               //通过计算属性的第一个函数 是vuex中的状态state，所以可以通过state直接获取数据
               return state.user
           },
           //简写方式
           csuser:state => state.user,
           cnum:"count"
       })
   }