写点什么

Vue 进阶(五):与 Vuex 的第一次接触

发布于: 3 小时前
Vue进阶(五):与 Vuex 的第一次接触

一、前言

Vue 项目中,如果项目结构简单,父子组件之间的数据传递可以使用 props 或者 $emit 等方式 (详参博文《Vue进阶(六):组件之间的数据传递》)。如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便。Vue 的状态管理工具 Vuex完美的解决了这个问题。

二、什么是 Vuex? 为什么要使用 Vuex ?

首先,我们需要知道 vue 是以单向数据流的方式驱动的。具有以下特点:


  • 多个视图依赖于同一状态。

  • 来自不同视图的行为需要变更同一状态。


vuex 类似Redux的状态管理器, 用来管理Vue的所有组件状态,采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生变化。


状态机就是保存你的状态和状态变化的一个盒子。这里有一些不同种类的状态机,适用于我们这个案例的是有限状态机。像它的名字一样,有限状态机包含有限的几种状态。它接收一个输入并且基于这个输入和当前的状态决定下一个状态,可能会有多种情况输出。当状态机改变了状态,我们就称为它过渡到一个新的状态




每一个 Vuex 应用的核心就是 store(仓库)。store基本上就是一个容器,它包含应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:


  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

  • 不能直接改变 store 中的状态。改变 store 中数据状态的唯一途径就是显式地提交 (commit) mutation


这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

三、安装并引入 Vuex

项目结构如下:



注:当应用变得比较复杂时候,store对象有可能变的相当臃肿。在此情况下,vuex允许将store分割成模块(module),每个模块有自己的statemutationactiongetter甚至是嵌套子模块等。


首先使用 npm 安装 Vuex


cnpm install vuex -S
复制代码


然后在main.js中 引入store.js, 然后注入 store


import Vue from 'vue'import App from './App'import Vuex from 'vuex'import store from './vuex/store'// 让vue使用vuex工具来实现组件之间的数据共享Vue.use(Vuex)
/* eslint-disable no-new */new Vue({ el: '#app', // 注入 store store, render: h => h(App)})
复制代码

四、构建核心仓库 store.js

Vuex 应用的状态 state 都应当存放在 store.js 里面,Vue 组件可以从 store.js 里面获取状态,可以把 store 通俗的理解为一个全局变量的仓库。


但是和单纯的全局变量又有一些区别,主要体现在当 store 中的状态发生改变时,相应的 vue 组件也会得到高效更新。


src 目录下创建一个 vuex 目录,将 store.js 放到 vuex 目录下。


import Vue from 'vue'import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({ // 定义状态,存储数据的对象,我们可以将你需要存储的数据在这个state中定义 state: { author: 'Wise Wrong' }})
export default store
复制代码


这是一个最简单的 store.js,里面只存放一个状态 author


注:虽然在 main.js 中已经引入了 VueVuex,但是这里还得再引入一次.

五、将状态映射到组件

<template>  <footer class="footer">    <ul>      <li v-for="lis in ul">{{lis.li}}</li>    </ul>    <p>      Copyright&nbsp;&copy;&nbsp;{{author}} - 2020 All rights reserved    </p>  </footer></template>
<script> export default { name: 'footerDiv', data () { return { ul: [ { li: '琉璃之金' }, { li: '朦胧之森' }, { li: '缥缈之滔' }, { li: '逍遥之火' }, { li: '璀璨之沙' } ] } }, computed: { author () { return this.$store.state.author } } }</script>
复制代码


这是 footer.vue 的 html 和 script 部分。在 computed 中,将 this.$store.state.author 的值返回给 html 中的 author。页面渲染之后,就能获取到 author 的值。


六、在组件中修改状态

然后在 header.vue 中添加一个输入框,将输入框的值传给 store.js 中的 author,这里使用 Element-UI 作为样式框架。



上面将输入框 input 的值绑定为 inputTxt,然后在后面的按钮 button 上绑定 click 事件,触发 setAuthor 方法。


methods: { setAuthor: function () {   this.$store.state.author = this.inpuTxt }}
复制代码


在 setAuthor 方法中,将输入框的值 inputTxt 赋给 Vuex 中的状态 author,从而实现子组件之间的数据传递。


七、官方推荐的修改状态的方式

上面的示例是在 setAuthor 直接使用赋值的方式修改状态 author,但是 vue 官方推荐使用下面的方法:



首先在 store.js 中定义一个方法 newAuthor,其中第一个参数 state 就是 $store.state,第二个参数 msg 需要另外传入,然后修改 header.vue 中的 setAuthor 方法。



这里使用 $store.commit 调用mutations中定义的函数 newAuthor,这个函数就是操作state中定义的成员函数,并将 this.inputTxt 传给 msg,从而修改 author。


禁止直接改变 store 中的状态!


改变 store 中数据状态的唯一途径就是显式地提交 (commit) mutationthis.$store.commit(‘mutations方法名’,值))。这样显式地提交(commit) mutations,可以让我们更好的跟踪每一个状态的变化,所以在大型项目中,更推荐使用第二种方法。


// 存储数据的对象,可以将需要存储的数据在这个state中定义const state = {  // 当前登陆的用户名  username: ''}const mutations = {  // 提供一个方法,为state中的username赋值  // 这些方法有一个默认的参数,这个参数就是当前store中的State  setUserName (state, username) {    //存入一个值    state.username = username    localStorage.setItem('myname', username)  },  getUserName (state) {    //输出一个值    return state.username  }}//使用的时候---> 通过commit调用mutations中定义的函数,这个函数就是操作state中定义的成员的函数// this.$store.commit('setUserName', res.data.username(请求返回的值))const actions = {  setUserNameAction: ({commit}, username) => {    commit('setUserName', username)  },  getUserNameAction: ({commit}) => {    commit('getUserName')  }}// 通过action来触发mutations中的函数,这种触发方式是异步方式//存入  this.$store.dispatch('setUserNameAction', res.data.username + 'aa')//取出  this.currentUserName = this.$store.dispatch('getUserNameAction')
// Getters是从 store 中的 state 中派生出一些状态,即当出现多处需要导入某个状态时,结果不是很理想,所以getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。const getters = { getUserName: (state) => { return localStorage.getItem('myname') }}//使用的时候,直接使用// <span class="welcome">你好:{{$store.getters.getUserName}}</span>
复制代码

八、拓展阅读

发布于: 3 小时前阅读数: 3
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(五):与 Vuex 的第一次接触