vue系列教程-15vuex的使用

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

什么是vuex

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

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

组成

  • State 数据仓库
  • getter 获取数据
  • mutation 修改数据
  • action 提交mutation
  • modules 模块

安装

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

vue create vuexdemo

可以使用 vue ui 安装 vuex插件

vue系列教程-15vuex的使用

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

vue系列教程-15vuex的使用

打开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;
  }
}

打开网页查看效果

vue系列教程-15vuex的使用

当然如果我们有多个 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>

看看效果

vue系列教程-15vuex的使用

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>

vue系列教程-15vuex的使用

actions

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

因为我们没有具体的后台,所以就模拟一个延时的操作,并使用 async来同步方法

actions: {
  async  changeColor(context, value) {
    //模拟一个存储属性的方法
    function saveUserInfo() {
      return new Promise((resolve) => {
        setTimeout(resolve, 1000)
      })
    }
    // 真实的开发啊 拿到用户id  const uid = context.state.user.id;
    // 并调用后台方法this.api.saveUserInfo(...)
    await saveUserInfo();
    context.commit('setColor', value);
  }
},

然后在组件中定义一个方法 this.$store.dispatch可以触发actions

setUserColor() {
  this.$store.dispatch("changeColor", "yellow");
}

在页面中绑定这个事件

<button @click="setUserColor">设置用户默认主题色</button>

看看效果

vue系列教程-15vuex的使用

modules

分模块其实很好理解吧,就是后期 vux 的属性太多,那么我们就分为一个一个的模块使用

我们在 modules中定义一个modulea模块,在这个模块里面的state定义一个primaryColor

 modules: {
   modulea: {
     state: {
       primaryColor: "white",
     },
     mutations: {
     }
   }
 }

在组件中调用一下

<div>modulea模块的值-{{$store.state.modulea.primaryColor}}</div>

看看效果

vue系列教程-15vuex的使用

大功告成!

上一篇:mutation中修改state中的状态值,却报[vuex] do not mutate vuex store state outside mutation handlers.


下一篇:20丨为什么需要Vuex