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

前言

vuex的执行流程

组件通过dispatch调用action，action通过commit来触发mutation，mutation来负责修改state，state修改后去重新渲染受影响的dom。

安装和引入

1、安装

npm install vuex -S

2、引入

新建：store/index.js。

import vue from 'vue';import Vuex from 'vuex';vue.use(Vuex);export default new Vuex.Store({ strict:true,//严格模式，防止直接修改state（性能很差，发布时改为false） state:{ a:1, b:2 }, mutations:{ addA(state,val){ state.a+=val; }, addB(state,val){ state.b+=val; } }, actions:{ addA({commit},val){ //调用mutations中的addA() commit('addA', val); }, addB({commit},val){ //调用mutations中的addB() commit('addB', val); } }, //相当于computed getters:{ getA(state){ return state.a; }, getB(state){ return state.b; }, count(state){ return state.a + state.b; } }, modules:{ }});

3、挂载

import store from './store';new Vue({ el: '#app', store, components: { App }, template: '<App/>'})

使用

映射关系

mapState > computed

mapGetters > computed

mapMutations > methods

mapActions > methods

State和mapState

state是vuex的核心，是统一存放数据的地方。

从store中获取值。（不推荐）

<template> <div> a:{{$store.state.a}} <br> b:{{$store.state.b}} </div></template>

官方推荐通过computed来获取，但是如果需要获取多个值就会很麻烦。

mapState

<template> <div> a:{{a}} <br> b:{{b}} </div></template><script> import {mapState} from 'vuex'; export default { name: "MapState", computed:{ //将store.state中的属性映射到computed ...mapState(['a','b']) } }</script>

getters和mapGetters

获取getters中的值。

<div> a:{{$store.getters.getA}} <br> b:{{$store.getters.getB}} <br> a+b={{$store.getters.count}}</div>

使用mapGetters映射。

<template> <div> a={{getA}} <br> b={{getB}} <br> a+b={{count}} </div></template><script> import {mapGetters} from 'vuex'; export default { name: "MapGetters", computed:{ //将store.getters映射到computed ...mapGetters(['getA','getB','count']) } }</script>

mutations和mapMutations

通过$store.commit来触发mutation。

不推荐直接调用mutation来修改。

<template> <div> a={{$store.state.a}} <br> b={{$store.state.b}} <br> a+b={{$store.getters.count}} <hr> <button @click="$store.commit('add',5)">a+5</button> </div></template>

使用mapMutations映射。

<template> <div> a={{$store.state.a}} <br> b={{$store.state.b}} <br> a+b={{$store.getters.count}} <hr> <button @click="addA(5)">a+5</button> </div></template><script> import {mapMutations} from 'vuex'; export default { name: "MapMutations", methods:{ //将store.mutations映射到methods ...mapMutations(['addA']) } }</script>

actions和mapActions

官方推荐通过action去触发mutation，虽然比较麻烦。

action支持异步，mutation只能同步。

通过$store.dispatch来触发action。

<button @click="$store.dispatch('addA',5)">a+5</button>

使用mapActions映射。

<template> <div> a={{$store.state.a}} <br> b={{$store.state.b}} <br> a+b={{$store.getters.count}} <hr> <button @click="$store.dispatch('addA',5)">a+5</button> </div></template><script> import {mapActions} from 'vuex'; export default { name: "MapActions", methods:{ //将store.actions映射到methods ...mapMutations(['addA']) } }</script>

Modules

当系统比较庞大时，store会变得非常臃肿。

为了方便store的模块化管理，Vuex 允许我们将 store 分割成 modules。

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

补充知识：向vuex存储数据和获取数据-和直接调用actions.js中的异步方法

向vuex的变量存储数据

1.在state.js中添加 userInfo: {},

2.actions.js中添加同步用户信息-将参数userInfo传递给USER_INFO

创建一个方法-不用异步方法

syncUserInfo({commit}, userInfo){ commit(USER_INFO, {userInfo});},

3.创建一个中间变量mutation-types.js

export const USER_INFO = 'user_info';

4.在actions.js中引入变量-USER_INFO

import { USER_INFO } from './mutation-types'

5.在mutations.js中引入变量

import { USER_INFO } from './mutation-types'

将userInfo赋值给state

[USER_INFO](state, {userInfo}) { state.userInfo = userInfo; },

6.外界直接调用actions.js中的方法 syncUserInfo

import {mapActions} from 'vuex' methods: { // 存到vuex-是个方法。需要...延展符展开 ...mapActions(['syncUserInfo']), }

向vuex中获取数据

1.引入 import {mapState} from 'vuex';

2.计算属性

computed:{ ...mapState(['userInfo'])},

直接调用vuex-中 actions.js的异步方法--

this.$store.dispatch

created(){ // 调用vuex-actions中的方法-刚进入app，就需要验证登录的时效性 this.$store.dispatch('getUserInfo')},

actions.js

// 7. 异步获取用户信息async getUserInfo({commit}){ const result = await getUserInfo(); // actions中调用getUserInfo方法---需要引入import console.log(result); if(result.success_code === 200){ commit(USER_INFO, {userInfo: result.message}); }},

actions中调用getUserInfo方法---需要引入

import { getUserInfo,} from '../api'----------------------api-index.js// 2.9 获取登录的用户信息export const getUserInfo = () => ajax(BASE_URL + '/api/user_info');

以上这篇vuex存取值和映射函数使用说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。