Vue进阶使用(四)---Vuex 状态管理模式（附模拟用户登录和动态编辑tag页demo）

前言：做一个有梦想的程序猿！

Vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 可以帮助我们管理共享状态（全局的用户信息、权限等），并附带了更多的概念和框架。

本文将用模拟用户登录demo来介绍vuex的使用。

安装Vuex

cnpm install vuex --save

同其他依赖一样，你也可以先在package.json dependencies属性中加入vuex的依赖，然后执行

cnpm install

进行安装

package.json文件查看vuex 版本

"dependencies": {
    "element-ui": "^2.13.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.0.3",
    "sass-resources-loader": "^2.0.3",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.4.0"
  },

Vuex核心属性

Vuex主要有五个核心属性
state
vuex里面的单一状态对象，用一个对象就包含了全部的应用层级状态。（相当于java中的属性）

getters
vuex的计算属性就像vue的计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。（相当于java的get方法）

mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，例如store.commit(‘setUserInfo’) ，mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数（相当于java中的set方法）。
在 Vuex 中，mutation 都是同步事务。

actions

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state和 getters。
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态；
Action 可以包含任意异步操作。

module
此属性放到下文介绍

使用Vuex–模拟用户登录

项目src目录新建一个store目录，里面新建一个index.js文件，代码如下

import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 注册vuex
Vue.use(Vuex)

// 初始化store
const store = new Vuex.Store({
  // state vuex里面的单一状态对象，用一个对象就包含了全部的应用层级状态。（相当于java中的属性）
  state: {
    userInfo: {
      id: 1,
      name: '管理员'
    }
  },
  /**
    getters vuex的计算属性就像vue的计算属性一样，getter的返回值会根据它的依赖被缓存起来，
    且只有当它的依赖值发生了改变才会被重新计算。（相当于java的get方法）
  */
  getters: {
    userInfo: state => state.userInfo
  },
  /**
     mutations 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，store.commit('setUserInfo')
     mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际
     进行状态更改的地方，并且它会接受 state 作为第一个参数（相当于java中的set方法）
     在 Vuex 中，mutation 都是同步事务
  */
  mutations: {
    setUserInfo (state, userInfo) {
      state.userInfo = userInfo
    }
  },
  /**
    actions Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用
    context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state
    和 getters。
    Action 类似于 mutation，不同在于：
    Action 提交的是 mutation，而不是直接变更状态。
    Action 可以包含任意异步操作。
  */
  actions: {
    login (context, userInfo) {
      /**
        Promise是ES6中用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），
        并且这个事件提供统一的 API，可供进一步处理。这里不展开讲解，具体可看这个教程
        https://www.jianshu.com/p/063f7e490e9a
      */
      return new Promise((resolve, reject) => {
        // 三秒之后再执行提交更改状态代码，模拟登录过程
        setTimeout(() => {
          context.commit('setUserInfo', userInfo)
          resolve()
        }, 3000)
      })
    }
  }
})

export default store

在main.js入口文件中引入vuex并注册到根组件中去

// 引入vuex
import store from './store'

new Vue({
  el: '#app',
  router,
  // 将vuex注册到根组件中
  store,
  components: { App },
  template: '<App/>'
})

vue页面中使用vuex状态

在 src/components 目录下新建 vuex-login目录，并在此目录下新建index.vue文件
代码如下：

<template>
  <div class="vuex-index">
    <div>
      <div class="font-size-32">vuex</div>
      <el-button type="primary"
        @click="updateUserInfo">更新用户信息</el-button>
      <div class="label">
        当前登录用户ID
        <div class="high-light">
          <!-- 使用vuex辅助函数映射到局部计算属性获取vuex中的状态 -->
          {{ userInfo.id }}
        </div>
      </div>
      <div class="label">
        当前登录用户名称
        <div class="high-light">
          <!-- 使用全局$store对象获取vuex中的状态 -->
          {{ $store.getters.userInfo.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'vuex-index',
  data () {
    return {
      isLogining: false
    }
  },
  // vue组件的计算属性
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    updateUserInfo () {
      const userInfo = {
        id: 2,
        name: '普通帐号'
      }
      // 调用vuex中的commit方法更新vuex中的状态
      this.$store.commit('setUserInfo', userInfo)
    }
  }
}
</script>

<style lang="scss" scoped>
.vuex-index {
  .label {
    color: #000;
    font-size: 16px;
    .high-light {
      color: #09f;
      font-size: 32px;
    }
  }
}
</style>

配置路由后访问页面效果如下：

模拟登录
代码如下：

<template>
  <div class="vuex-index">
    <div>
      <div class="font-size-32">vuex</div>
      <el-button type="primary"
        @click="login"
        :loading="isLogining">登录</el-button>
      <div class="label">
        当前登录用户ID
        <div class="high-light">
          <!-- 使用vuex辅助函数映射到局部计算属性获取vuex中的状态 -->
          {{ userInfo.id }}
        </div>
      </div>
      <div class="label">
        当前登录用户名称
        <div class="high-light">
          <!-- 使用全局$store对象获取vuex中的状态 -->
          {{ $store.getters.userInfo.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'vuex-index',
  data () {
    return {
      isLogining: false
    }
  },
  // vue组件的计算属性
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    login () {
      var user = sessionStorage.getItem('user')
      if (user) {
        console.log('清除缓存，用户为：' + user)
        sessionStorage.removeItem('user')
      }
      this.isLogining = true
      //这里的用户信息实际开发中用axios来请求后台获取
      const userInfo = {
        id: 3,
        name: '登录帐号'
      }
      // 调用vuex中的action模拟登录
      this.$store.dispatch('login', userInfo).then(() => {
        this.isLogining = false
        // sessionStorage 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
        window.sessionStorage.setItem('user', userInfo)
        this.$message.success('登录成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.vuex-index {
  .label {
    color: #000;
    font-size: 16px;
    .high-light {
      color: #09f;
      font-size: 32px;
    }
  }
}
</style>

页面效果如下：

Vuex module使用

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
我们将登录的demo，进行module封装
在项目src/store目录下创建一个modules目录，modules目录下创建user.js文件
代码如下：

// 封装user
const user = {
  // state vuex里面的单一状态对象，用一个对象就包含了全部的应用层级状态。（相当于java中的属性）
  state: {
    userInfo: {
      id: 1,
      name: '管理员'
    }
  },
  /**
    getters vuex的计算属性，getter的返回值会根据它的依赖被缓存起来，
    且只有当它的依赖值发生了改变才会被重新计算。（相当于java的get方法）
  */
  getters: {
    userInfo: state => state.userInfo
  },
  /**
     mutations 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，store.commit('setUserInfo')
     mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际
     进行状态更改的地方，并且它会接受 state 作为第一个参数（相当于java中的set方法）
     在 Vuex 中，mutation 都是同步事务
  */
  mutations: {
    setUserInfo (state, userInfo) {
      state.userInfo = userInfo
    }
  },
  /**
    actions Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用
    context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state
    和 getters。
    Action 类似于 mutation，不同在于：
    Action 提交的是 mutation，而不是直接变更状态。
    Action 可以包含任意异步操作。
  */
  actions: {
    login (context, userInfo) {
      /**
        Promise是ES6中用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），
        并且这个事件提供统一的 API，可供进一步处理。这里不展开讲解，具体可看这个教程
        https://www.jianshu.com/p/063f7e490e9a
      */
      return new Promise((resolve, reject) => {
        // 三秒之后再执行提交更改状态代码，模拟登录过程
        setTimeout(() => {
          context.commit('setUserInfo', userInfo)
          resolve()
        }, 3000)
      })
    }
  }
}

export default user

store目录下将原来的index.js改动如下：

import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 引入user模块
import user from './modules/user'
// 注册vuex
Vue.use(Vuex)

// 初始化store
const store = new Vuex.Store({
  modules: {
    user
  }
})

export default store

这样我们就可以使用modules进行模块化管理，使项目开发更整洁更方便

附：使用Vuex–动态编辑tag标签

使用Vuex来进行tag标签数据状态管理，前文已经介绍了vuex相关属性的使用，在次不多赘述，直接上代码
在store/modules/ 目录下新建tag.js文件，代码如下：

// 封装tag
const tags = {
  state: {
    dynamicTags: ['标签一', '标签二']
  },

  getters: {
    dynamicTags: state => state.dynamicTags
  },

  mutations: {
    setDynamicTags (state, dynamicTags) {
      state.dynamicTags = dynamicTags
    }
  }
}
export default tags

新建vuex-tag.vue页面，代码如下：

<template>
  <div class="vuex-index">
   <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
    {{tag}}
   </el-tag>

   <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
   </el-input>

   <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      inputVisible: false,
      inputValue: ''
    }
  },
  // vue组件的计算属性
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'dynamicTags'
    ])
  },
  methods: {
    handleClose (tag) {
      console.log(this.dynamicTags)
      //更新状态 
      this.dynamicTags.splice(this.dynamicTags.findIndex(item => item === tag), 1)
      this.$store.commit('setDynamicTags', this.dynamicTags)
    },

    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm () {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
         //更新状态 
        this.$store.commit('setDynamicTags', this.dynamicTags)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.vuex-index {
  .label {
    color: #000;
    font-size: 16px;
    .high-light {
      color: #09f;
      font-size: 32px;
    }
  }
}
</style>

在store/目录下index.js文件引入tag模块

import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 引入user模块
import user from './modules/user'
import tag from './modules/tag'
// 注册vuex
Vue.use(Vuex)

// 初始化store
const store = new Vuex.Store({
  modules: {
    user,
    tag
  }
})

export default store

效果图如下：

最后，如果本篇文章对您有所帮助，可以评论或点赞支持一下哦，感谢感谢！