vue系列教程-15vuex的使用

本内容为系列内容，全部内容请看我的vue教程分类

我的个人博客

本节仓库地址

视频教程地址

什么是vuex

vuex是vue.js专门用来进行状态管理的工具，采用集中式状态管理,并以相应的规则保证一种可预测的方式发生变化

通俗的来说，就相当于一个管家，我们把一些公用的数据交给他进行管理，并且每个组件都能从他那里获取数据，或者通知他修改数据，比如存储用户信息

组成

State 数据仓库

getter 获取数据

mutation 修改数据

action 提交mutation

modules 模块

安装

首先使用脚手架创建一个vue项目

vue create vuexdemo

可以使用 vue ui 安装 vuex插件

安装完成以后打开 main.js 可以发现使用方式和 router 是一样的

打开src/store/index.js,讲解一下属性

import Vue from \'vue\' import Vuex from \'vuex\' // 注册vuex Vue.use(Vuex) // 实例化一个vuex export default new Vuex.Store({ // state存储全局的变量 state: { }, // mutations 修改存储的变量 mutations: { }, //返回处理过的数据，相当于是 vuex 中的计算属性 getters: { }, // actions提交的是 mutation,可以实现异步操作，相当于我们出发一个操作，然后操作完成会修改存储的数据 actions: { }, // 分模块管理 modules: { } })

下面一一进行讲解

state

首先我们在 state中定义一个字符串,代表当前网页主色

state: { primaryColor: "red", },

然后来到 Helloworld组件，在 computed计算属性中定义 this.$store.state就可以获取到vuex中存储的值

computed: { primaryColor() { return this.$store.state.primaryColor; } }

打开网页查看效果

当然如果我们有多个 state 属性的话，这样写就非常麻烦，我们可以直接引入vux为我们导出的模块

import { mapState } from "vuex";

然后把刚刚的计算属性改一下，这个写法是 es6 对象展开运算 相关知识，完后后，就实现了在计算属性中定义

computed: { ...mapState(["primaryColor"]) // primaryColor() { // return this.$store.state.primaryColor; // } } mutations

我们在mutations中定义一个修改颜色的方法

mutations: { setColor(state, value) { state.primaryColor = value; } },

然后来到 Helloworld组件，定义一个方法，用来出发 mutations里面定义的事件，并传递一个 blue的值

methods: { setColor() { this.$store.commit("setColor", "blue"); } },

在页面中定义一个按钮并绑定刚刚的点击事件

<button @click="setColor">设置主题色</button>

看看效果

getters

首先我们在 state 中再定义一个 user对象

state: { primaryColor: "red", user: { id: 1, type: 1, sex: 1, } },

然后在getters中定义一个userInfo，根据不用用户的不同 type返回具体的字段

getters: { userInfo(state) { switch (state.user.type) { case 1: return "用户组" case 2: return "管理员组" } } },

然后在组件中定义一个计算属性，使用 this.$store.getters可以得到 vuex中定义的 getters

userInfo(){ return this.$store.getters.userInfo; },

也可以和 state 一样这样写

import { mapGetters, mapState } from "vuex"; ...mapGetters(["userInfo"])

在页面中显示出来

<div>{{userInfo}}</div>

actions

这里我们模拟这样一个场景，假如用户修改了默认颜色后，这个属性要传递给后台给用户存储起来