首页 > 其他分享 >Vuex基础入门

Vuex基础入门

时间：2023-07-28 14:26:37浏览次数：35  
标签：... 入门 基础 mutations value state actions Vuex store

一、什么是vuex

概念

　　专门在vue中实现集中式状态/数据管理的Vue插件，对Vue中多组件共享数据进行集中管理（读取、修改），同时也属于组件通信方式的一种，并且适用于任意组件间的通信

什么时候使用Vuex

  • 多个组件依赖同一个状态

  • 来自不同组件的行为需要变更同一状态

  • 多个组件需要共享数据

vuex的工作原理图

二、vuex环境搭建

创建store文件

　　创建store文件夹并在其中创建index.js

//引入Vue核心库
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
//准备actions对象，响应用户在组件中的动作
const actions={}
//准备mutations对象，通过mutation修改state中的数据
const mutations={}
//准备state对象，存放数据
const state={}
//准备getters对象，存放数据
const getters={}

//创建并将store暴露出去
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

引入配置

　　在main.js中创建vm时传入1中创建的store配置

//引入store
import store from './store'
......
//创建vm
new Vue({
    el:'#app',
    render: h => h(app),
    store
})

三、vuex的核心概念以及API

state

　　vuex管理的状态对象（数据），它是唯一的

//示例
const state={
    xxx：''
}
//组件中使用方法：<div>{{$store.state.xxx}}</div>

actions

　　值为对象，其中包含了多个相应用户操作的回调函数，主要通过commit来触发mutation中的函数，来间接更新state，里面可以包含异步代码

//示例
const actions={
    //同步（YYY是写在mutations中被调用的方法名）
    zzz({commit,state},data){
        commit('YYY',{data})
    },
    //异步
    zzz({commit,state},data){
        setTimeout(()=>{
            commit('YYY',data)
        },500)
    }
}
//组件中使用方法(val是传入的值，zzz是actions中的方法名)：$store.dispatch('zzz',val)

mutations

　　值为对象，其中包含了多个和直接更新state的方法，其中的方法不能写异步代码，只可以单纯的操作state

//示例
const mutaions={
    YYY(state,{data}){
        //更新state   
        ......
        state.xxx=data
    }
}
//组件中使用方法(val是传入的值)：$store.commit('YYY',val)

getters

　　值为对象，其中包含多个返回数据的函数，主要用于state中数据加工

//示例
const getters={
    bigSum(state){
        return state.sum*10
    }
}
//组件中使用方法：$store.getters.bigSum

modules

　　store的一个配置对象，主要用于当store过于臃肿时，可以将其分为多个module，每个module拥有自己的state，getters，actions，mutations

//示例
const Astore={
    namespaced:true,
    actions:{},
    mutations:{},
    getters:{},
    state:{}
}

export default new Vuex.Store({
    modules:{
      Astore  
    }
})

四、vuex的基本使用

步骤1：创建store相关配置文件

　　创建store文件夹中的index.js，在其中配置actions、配置mutations、配置state

//引入Vue核心库
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
//准备actions对象，响应用户在组件中的动作
const actions={
    add(context,value){
        context.commit('ADD',value)
    },
    sub(context,value){
        context.commit('SUB',value)
    }
}
//准备mutations对象，通过mutation修改state中的数据
const mutations={
    ADD(state,value){
        state.num += value
    },
    SUB(state,value){
        state.num -= value
    }
}
//准备state对象，存放数据
const state={
    num:0
}
const getters={
    bigSum(state){
        return state.num*10
    }
}

//创建并将store暴露出去
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

步骤2：组件中引入

<template>
  <div>
    <el-page-header @back="goBack" content="vuex基础案例"> </el-page-header>
    <div class="main-body">
      <el-radio-group v-model="radio">
        <el-radio-button label="1">通过actions调用</el-radio-button>
        <el-radio-button label="2">直接调用mutations</el-radio-button>
      </el-radio-group>
      <p class="normal-num">正常值：{{ $store.state.num }}</p>
      <p>变大10倍之后的值：{{ $store.getters.bigSum }}</p>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button @click="addNumber" v-if="radio == '1'">actions加</el-button>
      <el-button @click="lateAddNumber" v-if="radio == '1'">actions延迟加</el-button>
      <el-button @click="subNumber" v-if="radio == '1'">actions减</el-button>
      <el-button @click="muAddNumber" v-if="radio == '2'">mutatons加</el-button>
      <el-button @click="muSubNumber" v-if="radio == '2'">mutations减</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "BasePage",
  data() {
    return {
      value: 1,
      radio: "1",
      options: [
        { label: "1", value: 1 },
        { label: "2", value: 2 },
        { label: "3", value: 3 }
      ]
    };
  },
  computed: {},
  mounted() {},
  methods: {
    goBack() {
      this.$router.replace("/");
    },
    addNumber() {
      // 通过actions调用mutations中的方法
      this.$store.dispatch("add", this.value);
    },
    lateAddNumber(){
      this.$store.dispatch("lateAdd", this.value);
    },
    subNumber() {
      // 通过actions调用mutations中的方法
      this.$store.dispatch("sub", this.value);
    },
    muAddNumber() {
      //直接调用mutations中的方法
      this.$store.commit("ADD", this.value);
    },
    muSubNumber() {
      //直接调用mutations中的方法
      this.$store.commit("SUB", this.value);
    }
  }
};
</script>

总结

　　上面的两种方法都可以改变state，但是两种方法有使用场景的区别，由于actions中不能直接改变state，所以需要通过调用mutations中的方法间接去改变state，而mutations中的方法虽然可以直接改变state，但是mutations中不支持异步，所以当我们需要通过调用接口获取数据后，对接口返回数据进行保存时，就需要通过dispatch调用actions中的方法获取数据，然后再通过mutations中的方法改变state。官方推荐还是通过actions去调用mutations里面的方法去改变state。

 

五、vuex的辅助函数

mapState

　　概念：用于映射state中的数据为计算属性(就是能够改变你的写法，不用在页面组件中写$store.state.xxx)

//store文件夹中的index.js
const state={
    num:0,
}

//页面中使用
// <p class="normal-num">正常值：{{ stateNum }}</p>
computed:{
    // 对象方式（可起别名）
    ...mapState({stateNum:'num'}),
    // 数组方式
    ...mapState(['num'])
}

mapGetters

　　概念：用于映射getters中的数据为计算属性(就是能够改变你的写法，不用在页面组件中写$store.getters.xxx)

//store文件夹中的index.js
const state={
    num:0，
}
const getters = {
    bigSum(state) {
        return state.num * 10;
    }
};

//页面中使用
//<p>变大10倍之后的值：{{ getterBigSum }}</p>
computed:{
    // 对象方式（可起别名）
    ...mapGetters({getterBigSum:'bigSum'}),
    // 数组方式
     ...mapGetters(['bigSum'])
}

mapActions

　　概念:用于简化调用actions中的方法

<template>
  <div>
    <el-page-header @back="goBack" content="vuex辅助函数案例"> </el-page-header>
    <div class="main-body">
      <el-radio-group v-model="radio">
        <el-radio-button label="1">通过actions调用</el-radio-button>
        <el-radio-button label="2">直接调用mutations</el-radio-button>
      </el-radio-group>
      <!-- mapState写法 -->
      <p class="normal-num">正常值：{{ stateNum }}</p>
      <!-- mapGetters写法 -->
      <p>变大10倍之后的值：{{ getterBigSum }}</p>

      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button @click="addNumber(value)" v-if="radio == '1'">actions加</el-button>
      <el-button @click="lateAddNumber(value)" v-if="radio == '1'">actions延迟加</el-button>
      <el-button @click="subNumber(value)" v-if="radio == '1'">actions减</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  name: "BasePage",
  data() {
    return {
      value: 1,
      radio: "1",
      options: [
        { label: "1", value: 1 },
        { label: "2", value: 2 },
        { label: "3", value: 3 }
      ]
    };
  },
  computed: {
    // 对象方式（可起别名）
    ...mapState({stateNum:'num'}),
    // 数组方式
    // ...mapState(['num'])
    // 对象方式（可起别名）
    ...mapGetters({getterBigSum:'bigSum'}),
    // 数组方式
    // ...mapGetters(['bigSum'])

  },
  mounted() {},
  methods: {
    goBack() {
      this.$router.replace("/");
    },
    ...mapActions({addNumber:'add',lateAddNumber:'lateAdd',subNumber:'sub'}),
    // addNumber() {
    //   // 通过actions调用mutations中的方法
    //   this.$store.dispatch("add", this.value);
    // },
    // lateAddNumber(){
    //   this.$store.dispatch("lateAdd", this.value);
    // },
    // subNumber() {
    //   // 通过actions调用mutations中的方法
    //   this.$store.dispatch("sub", this.value);
    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main-body {
  margin-top: 20px;
  padding: 20px;
}
</style>

mapMutations

　　概念: 用于简化调用mutations中的方法

<template>
  <div>
    <el-page-header @back="goBack" content="vuex辅助函数案例"> </el-page-header>
    <div class="main-body">
      <el-radio-group v-model="radio">
        <el-radio-button label="1">通过actions调用</el-radio-button>
        <el-radio-button label="2">直接调用mutations</el-radio-button>
      </el-radio-group>
      <!-- mapState写法 -->
      <p class="normal-num">正常值：{{ stateNum }}</p>
      <!-- mapGetters写法 -->
      <p>变大10倍之后的值：{{ getterBigSum }}</p>

      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button @click="muAddNumber(value)" v-if="radio == '2'">mutatons加</el-button>
      <el-button @click="muSubNumber(value)" v-if="radio == '2'">mutations减</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  name: "BasePage",
  data() {
    return {
      value: 1,
      radio: "1",
      options: [
        { label: "1", value: 1 },
        { label: "2", value: 2 },
        { label: "3", value: 3 }
      ]
    };
  },
  computed: {
    // 对象方式（可起别名）
    ...mapState({stateNum:'num'}),
    // 数组方式
    // ...mapState(['num'])
    // 对象方式（可起别名）
    ...mapGetters({getterBigSum:'bigSum'}),
    // 数组方式
    // ...mapGetters(['bigSum'])

  },
  mounted() {},
  methods: {
    goBack() {
      this.$router.replace("/");
    },
    ...mapMutations({muAddNumber:'ADD',muSubNumber:'SUB'}),
    // muAddNumber() {
    //   //直接调用mutations中的方法
    //   this.$store.commit("ADD", this.value);
    // },
    // muSubNumber() {
    //   //直接调用mutations中的方法
    //   this.$store.commit("SUB", this.value);
    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main-body {
  margin-top: 20px;
  padding: 20px;
}
</style>

总结

　　辅助函数的作用主要是方便我们将原本$store.XXX的写法简化为辅助函数的形式，但是需要注意的是在使用mapActions以及mapMutations的时候，我们需要将想要传递的参数在绑定事件中传递出去，不然参数方法内使用的参数就变成了事件对象

六、vuex的模块化以及命名空间

目的

根据数据使用类型的不同将数据区分成不同的模块，让数据分类更加准确，方便维护

模块化代码

具体可看vuex模块化案例

  • 步骤一：修改store.js

const personStore={
    namespaced: true,
  state: {
    personList: []
  },
  getters: {
    firstPersonName(state) {
      return state.personList[0]?state.personList[0].name:'无';
    }
  },
  actions: {
    addPerson(context, value) {
      if (value !== "") {
        context.commit("ADD_PERSON", value);
      }
    },
    delPerson(context, value) {
      context.commit("DEL_PERSON", value);
    }
  },
  mutations: {
    ADD_PERSON(state, value) {
      state.personList.push(value);
    },
    DEL_PERSON(state, value) {
      let arr = [];
      state.personList.forEach(item => {
        if (item.id != value) {
          arr.push(item);
        }
      });
      state.personList = arr;
    }
  }
}

export default new Vuex.Store({
    modules:{
        personStore
    }
})

 

  • 步骤二：修改组件内使用代码
//使用state
//方式1：原始写法
this.$store.state.personStore.personList
//方式2：借助辅助函数mapState
...mapState('personStore',['personList'])
...mapState('personStore',{personList:'personList'}])

//使用getters
//方式1：原始写法
this.$store.getters[personStore/firstPersonName]
//方式2：借助辅助函数mapState
...mapGetters('personStore',['firstPersonName'])
...mapGetters('personStore',{firstPersonName:'firstPersonName'}])

//使用actions
//方式1：原始写法
this.$store.dispatch[personStore/addPerson]
//方式2：借助辅助函数mapState
...mapActions('personStore',{addP:'addPerson'}])

//使用mutations
//方式1：原始写法
this.$store.commit[personStore/ADD_PERSON]
//方式2：借助辅助函数mapMutations
...mapMutations('personStore',{ADDP:'ADD_PERSON'}])

 

标签：...,入门,基础,mutations,value,state,actions,Vuex,store
From： https://www.cnblogs.com/longflag/p/17587456.html

相关文章

  • 小白编程入门要怎么学？
    1、如果你已经掌握了Windows的使用，你就可以踏上编程之旅了，开始游戏式的程序开发！2、首先从学习C语言开始。有些人可能认为C语言很难，建议从VB（VisualBasic）开始学习。虽然通过使用控件堆砌小软件可以获得一些成就感，但基础才是最重要的！C语言涵盖了更全面、清晰的数据类型描述，正是编程......
  • Wireshark零基础入门学习笔记01
    下载与安装wireshark是一款免费的数据包分析软件，可以通过访问官方网站进行下载安装，支持windows、linux、macos等多种平台（还可以下载源码）。wireshark功能强大，安装方便，掌握了wirshark的使用方法不但可以在学习中帮我们更直观深入得了解网络协议的工作原理，更能在以后的工作中帮助我们......
  • Redis从入门到放弃（3）：发布与订阅
    1、介绍Redis是一个快速、开源的内存数据库，支持多种数据结构，如字符串、哈希、列表、集合、有序集合等。除了基本的数据存储和检索功能外，Redis还提供了许多高级功能，其中之一就是发布订阅（Pub/Sub）。发布订阅是一种消息传递模式，它允许消息的发布者（发布者）将消息发送给多个订阅者（订阅......
  • 实时嵌入式Linux设备基准测试快速入门4测试和测量
    本章将介绍主要测试方案及其具体配置和结果。在介绍实际测量结果之前，将尽可能总结被测设备的特性。最后，将对结果进行分析，并概述由于高速缓存一致性问题造成的延迟方面的主要瓶颈，提出减少延迟的解决方案，并解释用于发现和缓解问题的方法。设备用于智能设备的SABRE板实际参与所......
  • python教程 入门学习笔记 第2天 第一个python程序 代码规范 用默认的IDLE (Python GUI
    四、第一个python程序1、用默认的IDLE(PythonGUI)编辑器编写2、在新建文件中写代码，在初始窗口中编译运行3、写完后保存为以.py扩展名的文件4、按F5键执行，在初始窗口观看运行结果5、代码规范：1）先保存再执行2）一句代码单独占一行3）语法中的符号，必须使用英文4）代码前面不能有......
  • linux shell编程入门
    摘要介绍shell是什么shell快速开始一、基本概念1.shell是什么Shell是一个命令行解释器，它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序用户可以用Shell来启动、挂起、停止甚至是编写一些程序。2.shell脚本|执行方式脚本格式要求脚本以#!/b......
  • C++入门到放弃(04)——类的访问权限：public、private、protected
    1.成员访问权限假定以下类：classBase{public://constructfunctionBase(inta=0,intb=0,intc=0):m_public(),m_protected(),m_private(){}intm_public;voidpublic_fun(){cout<<m_public<<endl;}protected:intm_prote......
  • Linux基础——shell
    shell#############shell是什么-BashShell是一个命令解释器（python解释器），它在操作系统的最外层，负责用户程序与内核进行交互操作的一种接口，将用户输入的命令翻译给操作系统，并将处理后的结果输出至屏幕-没有图形化界面了-远程链接工具，链接上，就打开了一个shell窗口，可以输入命令......
  • 图的基础知识梳理
    图的基础知识梳理目录图的基础知识梳理图的定义图的分类有向图无向图完全图稀疏图稠密图平凡图零图顶点的度孤立点叶节点偶点奇点图的路径图的连通性无向图有向图带权图图的储存邻接矩阵思路无向图代码有向图代码时间、空间复杂度优点邻接表思路代码时间、空间复杂度优点欧拉路无......
  • Maven基础
    一、Maven仓库1.1三种类型Maven仓库本地（local）  本地仓库是机器上的一个文件夹，它在你第一次运行任何maven命令的时候创建，当你运行一次Maven构建，Maven会自动下载所有依赖的jar文件到本地仓库中。它避免了每次构建时都引用存放在远程机器上的依赖文件。  Maven本地......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99