我们一起看看Vuex使用流程是什么样的?

2025-11-04 22:21:08分类：IT科技阅读(8663)

一、使用什样使用Vuex的流程目的

实现多组件状态管理，多个组件之间需要数据共享

二、使用什样Vuex 的流程五大核心

其中state和mutation是必须的，其他可根据需求来加

1、使用什样state 负责状态管理，流程类似于vue中的使用什样data，香港云服务器用于初始化数据 2、流程mutation 专用于修改state中的使用什样数据，通过commit触发 3、流程action 可以处理异步，使用什样通过dispatch触发，流程不能直接修改state，使用什样首先在组件中通过dispatch触发action，流程然后在action函数内部commit触发mutation，使用什样通过mutation修改state状态值 4、getter Vuex中的计算属性，IT技术网相当于vue中的computed,依赖于state状态值，状态值一旦改变，getter会重新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要使用getter 5、module 模块化管理

使用流程

1.创建store实例并且导出 store.js

import Vue from vue import Vuex from vuex Vue.use(Vuex) const store = new Vuex.Store({     //声明state     state: {        userInfo:{ userName:"" }     },            //声明mutations     mutations: {       setUserInfo(state,userInfo){           state.userInfo = userInfo       }     },        //声明actions     actions: {       setUserInfo({ commit },userInfo){         commit(setUserInfo,userInfo)       }     },         //声明getters     getters:{       userName(state){         return "姓名："+state.userInfo.userName       }     } }) export default store 

2.引入Vuex

import Vue from vue import App from ./App.vue import store from ./store new Vue({   render: h => h(App),   store }).$mount(#app) 

3.组件内使用

使用方式一

<template>  <div>      <!-- state使用 -->      <p>{{$store.state.userInfo.userName}}</p>      <!-- getters使用 -->      <p>{{$store.getters.userName}}</p>      <!-- action使用 -->      <p @click="setInfo">存储信息</p>  </div> </template>  export default {    methods: {       setInfo(){         this.$store.commit(setUserInfo,{           userName:"鬼鬼"         })       }    } } 

使用方式二

<template>  <div>      <!-- state使用 -->      <p>{{userInfo.userName}}</p>      <!-- getters使用 -->      <p>{{userName}}</p>      <!-- action使用 -->      <p @click="setInfo">存储信息</p>  </div> </template>  import { mapState, mapGetters, mapMutations, mapActions } from vuex export default {   methods: {     ...mapActions([setUserInfo]),     // ...mapMutations(["setUserInfo"]),     setInfo(){       this.setUserInfo({          userName:"鬼鬼"       })   },   computed: {     ...mapState({          userInfo: state => state.userInfo      }),     ...mapGetters([userName]),   } } 

本文转载自微信公众号「前端人」，作者鬼哥。转载本文请联系前端人公众号。

企商汇