vue - vuex_vue3.0教程

Vue (56) 2023-09-06 19:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说vue - vuex_vue3.0教程,希望能够帮助你!!!。

前言

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

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

首先,我们需要知道 vue 是以单向数据流的方式驱动的。

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

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

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

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

vue - vuex_vue3.0教程_https://bianchenghao6.com/blog_Vue_第1张

vue - vuex_vue3.0教程_https://bianchenghao6.com/blog_Vue_第2张

Vuex关系链

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

  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store

中的状态发生变化,那么相应的组件也会相应地得到高效更新。

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

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

一、安装并引入 Vuex

项目结构:

vue - vuex_vue3.0教程_https://bianchenghao6.com/blog_Vue_第3张

Vue项目结构

注:当应用变得比较复杂时候,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 © {{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 的 htmlscript 部分。

computed 中,将 this.$store.state.author 的值返回给 html 中的 author。页面渲染之后,就能获取到 author 的值。

vue - vuex_vue3.0教程_https://bianchenghao6.com/blog_Vue_第4张

四、在组件中修改状态

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

vue - vuex_vue3.0教程_https://bianchenghao6.com/blog_Vue_第5张

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

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

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

vue - vuex_vue3.0教程_https://bianchenghao6.com/blog_Vue_第6张

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

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

vue - vuex_vue3.0教程_https://bianchenghao6.com/blog_Vue_第7张

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

vue - vuex_vue3.0教程_https://bianchenghao6.com/blog_Vue_第8张

这里使用 $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>

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

发表回复