【Vue_06】VueX

原创
02/17 21:36
阅读数 436

一、Vuex 概述

1. 什么是 Vuex

1.Vuex 是为 Vue.js 应用程序开发的状态管理模式。采用集中式存储管理应用所有组件的状态,并以相应的规则保证状态以可预测的方式发生变化。

2.能够在vuex中集中管理共享的数据,便于开发和后期进行维护。

3.能够高效的实现组件之间的数据共享,提高开发效率。

4.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新。

在这里插入图片描述

2. Vuex 的基本使用

  • 安装
npm install vuex --save
  • 创建 store.js 文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 数据
  },
  // 只有 mutations 中定义的函数,才有权利修改 state 中的数据
  mutations: {
	// 方法
  },
  actions: {
    methodAsync(context) {
     	// 异步操作
    },
  },
  getters: {
	// 数据加工
  }
})
  • 将 store 挂载到 Vue 实例
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

二、Vuex 核心

1. state

  • state 是什么

    State 提供唯一的公共数据源,所有共享的数据都要统一放到 Store 中的 State 中存储

  • 获取 state 中数据的方式

    // 在 store.js 中声明
    state: {
        // 数据
    }
    
    
    /* 
    	方式一
    */
    // 在对应 vue 组件中
    this.$store.state.全局数据名称
    
    /* 
    	方式二
    */
    // 1.在对应 vue 组件中导入 mapState
    import { mapState } from 'vuex'
    // 2. 然后数据映射为计算属性
    computed:{ 
    	// ...为展开表达式
    	...mapState(['全局数据名称']) 
    }
    

2. Mutation

  • Mutation 是什么

    Vuex 不支持直接修改 state 中的数据,需要 Mutation 修改间接 state 中的数据

  • Mutation 的使用方式

    // 1. 先在 store.js 中定义
    mutations: {
    	// 参数 1:永远都是 state 也就是 $state 对象
    	// 参数 2:调用方法传递的参数,可以没有
        method(state,step){
        	// 操作
        }
    }
    
    
    /* 
    	方式一
    */
    // 在对应 vue 组件中使用 commit 函数调用 mutations 中的对应函数
    this.$store.commit("Mutation 函数名","参数")
    
    /* 
    	方式二
    */
    // 1. 在对应 vue 组件中导入 mapMutations 
    import { mapMutations } from 'vuex'
    
    // 2. 将 Mutation 函数映射为 methods 函数
    methods:{
      ...mapMutations(['method'])
    }
    
    

3. Action

  • Action 是什么

    在 Mutations 中不能编写异步的代码,会导致 vue 报错,vuex 中提供了 Action 来执行异步操作。

  • Action 的使用方式

    // 在 store.js 中声明异步函数
    actions: {
      mthodAsync(context,"参数"){
        // 异步操作
      }
    }
    
    /*
    	方式一
    */
    // 在对应 vue 组件中
    this.$store.dispatch("异步函数名","参数")
    
    /*
    	方式二
    */
    // 1. 在对应 vue 组件中导入 mapAction
    import { mapActions } from 'vuex'
    
    // 2. 将 action 函数映射为 methods 函数
    methods:{
      ...mapMutations(["异步函数名"])
    }
    

4. Getter

  • Getter 是什么

    Getter 用于对 Store 中的数据进行加工处理形成新的数据,它只会包装 Store 中保存的数据,并不会修改 Store 中保存的数据。 当 Store 中的数据发生变化时,Getter 生成的内容也会随之变化

  • Getter 的使用方式
    // 在 store.js 中添加 getter 属性
    getters:{
    	//添加了一个属性
    	属性名 : state => {
    		return "修饰后的内容";
    	}
    }
    
    
    /*
    	方式一
    */
    // 在对应 vue 组件中使用以下方式
    this.$store.getters.属性名
    
    /*
    	方式二
    */
    // 1. 在对应 vue 组件中引入 mapGetter
    import { mapGetters } from 'vuex'
    // 2. 将 Getter 属性映射为 计算属性
    computed:{
      ...mapGetters(['showNum'])
    }
    
展开阅读全文
打赏
1
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
1
分享
返回顶部
顶部