内容摘要：一、使用Vuex的目的实现多组件状态管理，多个组件之间需要数据共享二、Vuex 的五大核心其中state和mutation是必须的，其他可根据需求来加1、state 负责状态管理，类似于vue中的da

一、使用什样使用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中的计算属性，网站模板相当于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]),   } } 

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

高防服务器