vue2中的状态管理工具Vuex

VUEX---状态管理工具

作用:用来管理各组件共享数据的工具,组件通信传递数据的时候,子传父,父传子的方式复杂不易维护,vuex提供一个仓库,存储共享数据,用于组件数据通信,各组件的数据是同步的,实现响应式开发。

构建 vuex 环境

  • 创建一个项目,有两个子组件,和根组件之间共享数据,三者数据同步,任何一个组件可以修改数据

创建一个空仓库

安装VUEX (手动)

如果选择手动安装,vue2输入命令npm install vuex@3 ,如果报错可能是依赖产生冲突,可再尝试npm install vuex@3 --force 试一试

新建文件模块

在 src 下新建一个文件夹 store ,在里面新建一个 index.js 文件,里面存放的就是vuex的核心代码

创建仓库

javascript 复制代码
//先导入核心包
import Vue from 'vue'
import Vuex from 'vuex'

//安装插件
Vue.use(Vuex)

//创建仓库,空的
const store = new Vuex.store()

//到处给main.js使用
export default store

main.js导入挂载

使用仓库---state

state 提供唯一的公共资源,所有共享的数据都要统一放到 Stpre 中的State 存储,在state 对象中可以添加我们要共享的数据。

注意:state 状态,即数据,类似组件中的 data, 但data是组件自己的数据,state 是所有组件共享的数据

获取数据

获取 store:

  1. this.$store

  2. import 导入 store

模板中: {{ $store.state.xxx }}

组件逻辑中:this.$store.state.xxx

JS模块中:store.state.xxx

辅助函数

每次获取仓库数据的时候,都要 <math xmlns="http://www.w3.org/1998/Math/MathML"> s t o r e 或者 t h i s . store或者this. </math>store或者this.stroe 比较重复难写,可以把state 中是的数据,定义在组件计算属性中

javascript 复制代码
computed: {
  count () {
    return this.$store.state.count
  }
}

//模板中使用数据就可以直接 {{ count }}
  • 通过赋值函数简化: mapState 是辅助函数,帮我们把 store 的数据 自动映射到组件的计算属性中,这个函数是vuex提供的一个函数就可以调用,使用时需要导出来,以数组的方式引入state,最终这个函数得到的是一个对象
JavaScript 复制代码
//从vuex中导入函数
import { mapState } from 'vuex'

//在计算属性中写入辅助函数
computed () {
  //count () {return this.$store.count} 之前是这么一个个写
  ...mapState(['count','title'])
}
//同样在模板中就直接写 {{count}} 简写形式

修改数据--mutations

  • vuex同样遵循单向数据流,组件中不能直接修改仓库的数据
  • 单向数据流: 你可以理解为只读文件,你能读,但是不能修改,如果要修改就要通知xxx,让xxx修改,如果要修改,就需要发送请求给仓库进行修改。在一个子组件中强行写入执行函数,虽然可以运行,但修改的组件多了,维护时就不容易知道是谁修改的,不满足工程化开发要求。

Mutations的基本使用

py 复制代码

自动接口插件

  • json-seerver 当我们前端页面写好之后,后端接口没准备好,我们就可以通过临时搭建的服务器,自己生成接口调用,来测试自己的web项目

  • 全局安装: npm install -g json-server

  • 在项目下创建一个db文件夹,文件夹里面创建一个文件index.jsonw文件,里面就可以存放我们需要的数据,只要提供数组包对象的格式,插件就会自动给我们提供增删改查的一套接口,

  • 然后在db文件下打开终端,输入json-server --watch index.json命令,就启动了服务器环境,根据提供的端口号,就可以查看返回的数据,进行页面渲染。

  • 服务器启动成功之后,窗口不能关闭,不然访问不了。

    注意: 这里只是模拟一个临时的假数据,用来进行测试的,等后端提供接口之后就可以直接还了。
    npm安装axios时,npm install axios安装可能报错,试一试npm install axios --save --legacy-peer-deps。

    原因:npm install axios是最新版的axios,如果你电脑以前安装的是旧版本,有些依赖包就会没安装到

store仓库的用法

模块创建

  • store下创建一个文件夹modules,里面放的就是各个模块的数据

    子模块cart.js

    javascript 复制代码
    import axios from 'axios'
    export default {
      namespaced: true,
      state () {
        return {
          // 购物车数据
          list: []
        }
      },
      mutations: {
        updateList (state, newList) {
          state.list = newList
        }
      },
      actions: {
        // 异步请求数据
        async getList (context) {
          const res = await axios.get('http://localhost:3000/frends')
          //console.log(res)
          context.commit('updateList', res.data)
        }
      },
      getter: {}
    }

    根文件index.js

    javascript 复制代码
    import Vue from 'vue'
    import Vuex from 'vuex'
    import cart from './modules/cart'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      modules: {
        cart
      }
    })

相关推荐
阑梦清川13 分钟前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了2 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
不讲道理的柯里昂3 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷3 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401613 小时前
vue学习路线(10.监视属性-watch)
前端·vue.js
慧一居士3 小时前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
Hilaku3 小时前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
艾克马斯奎普特3 小时前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范