【Vue基础】Vuex的使用

本专栏将从基础开始，循序渐进的讲解Vue的基本概念以及使用，希望大家都能够从中有所收获，也请大家多多支持。
专栏地址: Vue专栏
相关软件地址: 相关安装包地址
如果文章知识点有错误的地方，请指正！大家一起学习，一起进步。

文章目录

1 Vuex的安装与使用

Vuex是专为Vue.js应用程序开发的状态管理工具。采用集中式存储并管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex可以保存需要管理的状态值，只需要把值定义在Vuex中，即可在整个Vue项目的组件中使用，值一旦被修改，所有引用该值的地方都会自动更新,Vuex类似于一套管理全局变量的组件。

安装Vuex

cnpm install vuex --save

一般不把vuex的配置放在main.js中，常用做法是在main.js同级目录新建文件夹store，并在store文件夹下新建index.js，然后再main.js中使用import store from “./store”,并挂载到Vue实例中。配置如下：

store.js

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建Vuex对象
const store = new Vuex.Store({
    
    
  state:{
    
    
    //存放的键值对就是所要管理的状态
    name:"这是Vuex的第一个数据"
  }
})

//导出store
export default store;

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store";
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  router,
  store,//将创建的Vuex实例挂载到Vue实例中
  components: {
    
     App },
  template: '<App/>'
})

在组件中使用

 <h1>{
    
    {
    
    $store.state.name}}</h1>
//或在组件方法中使用:
this.$store.state.name

2 Vuex中的核心内容

在Vuex中，不止有state还有用来操作state中数据的方法集，成员列表如下:

state:数据源存放状态
mutations:成员操作
getters:加工state成员给外界
actions:异步操作
modules：模块化状态管理

2.1 mutations的基本使用

其中mutations是操作state数据方法的集合，例如对数据的修改、增加、删除等，mutations方法有默认的形参([state],[payload]),state是当前Vuex对象中的state，payload在该方法在被调用时传递参数使用，例如，编写一个方法，在被执行时，把state中管理的name值修改为HelloCodinn,代码如下：

//创建Vuex对象
const store = new Vuex.Store({
    
    
  state:{
    
    
    //存放的键值对就是所要管理的状态
    name:"这是Vuex的第一个数据"
  },
  mutations:{
    
    
    edit(state){
    
    
      state.name = "HelloInn"
    }
  }
})

然后可以在任何地方调用，例如在组件的mounted中使用，代码如下：

mounted() {
    
    
  this.$store.commit('edit')
}

带参数的调用方式，修改Vuex：

//创建Vuex对象
const store = new Vuex.Store({
    
    
  state:{
    
    
    //存放的键值对就是所要管理的状态
    name:"这是Vuex的第一个数据"
  },
  mutations:{
    
    
    //当需要提交多个参数是，推荐把它们放在一个对象中提交
    edit(state,payload){
    
    
      state.name = "HelloInn"
    }
  }
})

调用如下：

this.$store.commit('edit',{
    
    age:18,sex:'男'})

2.2 mutations的增加和删除函数

相当于对字典的操作，Vue.set为某个对象成员设置值，若不存在则新增,例如对state对象添加一个age成员，代码如下:

Vue.set(state,"age",18)

Vue.delete删除成员，将刚刚添加的age成员删除，代码如下:

Vue.delete(state,'age')

2.3 getters函数

getters函数相当于Vue中的computed计算属性，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖发生了改变才会被重新计算，getters可以用于监听state中值的变化，返回计算后的结果。

例如如下代码:

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建Vuex对象
const store = new Vuex.Store({
    
    
  state:{
    
    
    //存放的键值对就是所要管理的状态
    name:"这是Vuex的第一个数据",
    age:18
  },
  mutations:{
    
    
    //当需要提交多个参数是，推荐把它们放在一个对象中提交
    edit(state,payload){
    
    
      state.name = "HelloInn"
    }
  },
  getters:{
    
    
    infoName(state){
    
    
      return "姓名:" + state.name
    },
    infoFull(state,getters){
    
    
      return getters.infoName + '年龄:' + state.age
    }

  }
})

//导出store
export default store;


//使用如下
  <h1>{
    
    {
    
    $store.getters.infoFull}}</h1>

2.4 actions函数

由于直接在mutation方法中进行异步操作会引起数据失效,所以提供了action函数，用来专门进行异步操作，actions中的方法有两个默认参数，context：上下文对象（相当于this），payload：传递的参数。

例如在两秒后执行mutations中的edit方法，由于setTimeout是异步操作，所以需要使用actions,代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建Vuex对象
const store = new Vuex.Store({
    
    
  state:{
    
    
    //存放的键值对就是所要管理的状态
    name:"这是Vuex的第一个数据",
    age:18
  },
  mutations:{
    
    
    //当需要提交多个参数是，推荐把它们放在一个对象中提交
    edit(state,payload){
    
    
      state.name = "HelloInn" + payload.age
    }
  },
  getters:{
    
    
    infoName(state){
    
    
      return "姓名:" + state.name
    },
    infoFull(state,getters){
    
    
      return getters.infoName + '年龄:' + state.age
    }
  },
  actions:{
    
    
    //payload是调用的时候传递的参数
    delayEdit(context,payload){
    
    
      //由于是异步操作，所以将异步操作封装为一个Promise对象
      return new Promise((resolve, reject) => {
    
    
        setTimeout(()=>{
    
    
          //edit是需要调用的函数
          context.commit('edit',payload)
        },2000)
      })

    }
  }
})

//导出store
export default store;

调用如下：

<button @click="delayEdit">异步获取数据</button>

delayEdit(){
    
    
  this.$store.dispatch('delayEdit',{
    
    age:20})
}

3 模块组

当项目庞大，可以采用模块化管理模式。Vuex可以将store分割成模块，每个模块拥有自己的state、mutation、action、getters。

首先在store/index.js文件夹中新建结果模块，然后在store/index.js中配置路由，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

const moduleA = {
    
    
  state:{
    
    
    //存放的键值对就是所要管理的状态
    name:"这是Vuex的第一个数据A",
    age:18
  },
}

const moduleB = {
    
    
  state:{
    
    
    //存放的键值对就是所要管理的状态
    name:"这是Vuex的第一个数据B",
    age:18
  },
}

export default new Vuex.Store({
    
    
  modules:{
    
    
    a:moduleA,
    b:moduleB
  }
})

使用如下：

<h1>{
    
    {
    
    $store.state.b.name}}</h1>