vue之使用vuex进行状态管理详解

目录
  • vuex进行状态管理
  • vuex状态管理基本使用

vuex进行状态管理

首先学习vuex必须先知道vue原理

Vue是一个典型的MVVM框架,模型(Model)只是普通的JavaScript对象,修改它则视图(View)会自动更新。这种设计让状态管理变得非常简单而直观

Vue实现这种数据双向绑定的效果,需要三大模块:

  • Observer:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
  • Compile:对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
  • Watcher:作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图

大概分为这么几类

vuex是什么呢

vuex是实现状态管理的工具 可以用来管理大型项目的工具

下面是一个简单的vuex的结构

index是主文件

//index//
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as actions from './actions'
import * as mutations from './mutations'
Vue.use(Vuex)
const state = {
  username: '123'
}
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})
export default store

进行一个简单地账户管理

//actions文件
// 给action注册事件处理函数。当这个函数被触发时候,将状态提交到mutations中处理
export function modifyAName({commit}, name) { // commit 提交;name即为点击后传递过来的参
    return commit ('modifyAName', name)
}

// ES6精简写法
//export const modifyAName = ({commit},name) => commit('modifyAName', name)
//motations文件
// 提交 mutations是更改Vuex状态的唯一合法方法
export const modifyAName = (state, name) => { // A组件点击更改餐馆名称为 A餐馆
  state.resturantName = name // 把方法传递过来的参数,赋值给state中的resturantName
}
 //getters文件
// 获取最终的状态信息
export const resturantName = state => state.resturantName
//组件A/methods函数
sub(){
      let log = document.querySelector("#log").value;
      let reg = document.querySelector("#reg").value;
      userapi("/users/userpsw",{name:log,psw:reg}, (mes) => {
        if(mes === 1){
          console.log(log)

          this.$store.commit("modifyAName",log)
          // 账户名称
          console.log(this.$store.getters.resturantName)
          document.querySelector(".text").innerHTML = "登录成功"
          this.$router.push({ path: '/my' })
        }else{
          document.querySelector(".text").innerHTML = "登录失败"
        }
      })
    },
组件B/computed
 computed:{
      username(){//调用username即可   {{username}}
         return  this.$store.getters.resturantName
      }
  },

vuex状态管理基本使用

通过npm安装vuex

npm install vuex --save

使用vuex

import Vuex from 'vuex'
Vue.use(Vuex)
//赋值给一个变量,然后引入
let store = new Vuex.Store({
    ...
})
//为了更好的维护,且体现模块化,可以写在别的js文件中,然后导入
import store from './store'     //创建一个store文件夹,默认为文件夹下的index.js文件
new Vue({
  ...
  store,
  ...
})

使用vuex基本结构

new Vuex.Store({
  //状态
  state: {
    count: 100
  },
  //将状态装饰,或刷选,以想要的结果输出
  getters: {
    hasUnit () {
      return this.state.count.filter(count => count + 1)
    }
  },
  //可以理解为变更状态的方法,第一个参数为state,可以再添加自定义参数,注意:只能进行同步
  mutations: {
    increment (state) {
      state.count++
    }
  },
  //可控制的提交mutation事件,弥补mutation无法异步
  actions: {
    increment (state) {
      setTimeout(() =>
        state.commit('increment'), 30)
    }
  }
})

为了更好的维护,往往将store文件写成以下结构 ,名字自定义,但是需要知道每个文件的作用

  • index.js:主要作为导出store,作为汇总的文件
  • state.js:作为定义的变量集合,作为一个对象导出
  • getters.js:作为主要是获取state中变量值的方法,return出state相应的值,或者length等等的一些state变量的信息
  • mutations-type.js: 作为一些方法等命名的变量,防止书写错误

  • mutaintions.js:存放修改state变量的同步方法,这里可以的方法名就是用了mutations-type.js中的变量命名,[object.value]这种方式是ES6中的语法

  • action.js:存放修改state变量的异步方法

在组件中引用,不使用mapXXXXX辅助函数情况下

state和getter:直接在computed计算属性中使用

 computed: {
    count () {
      return this.$store.state.count
    },
    hasUnit () {
      return this.$store.getters.hasUnit
    }
  }

mutations和actions则被作为事件调用,可以放在methods,watch等等,有事件调用的时候都可以

methods: {
    add () {
      this.$store.commit('increment')    // mutations使用commit调用
    },
    asyncAdd () {
      this.$store.dispatch('increment')  // actions使用dispatch调用
    }
  }

通过mapXXXX辅助函数来引用 

先确保组件中已导入vuex的相应辅助函数:用到哪个导入哪个

import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'
//导入多个:ES6模块
import { mapState, mapGetters } from 'vuex'

然后根据你的需求使用对应的辅助函数,前提是已经导入

  computed: {
    ...mapState([
      'count'
    ]),
    ...mapGetters([
      'addUnit'
    ])
  }
//使用this.count, this.addUnit
methods: {
    ...mapMutations([
       'increment'
    ]),
    ...mapActions({
       addNum: 'increment'
    })
    add () {
       this.increment()
    }
}
//可以被当做事件调用,为了避免命名冲突,可以使用重命名,需要使用{}而不是[]

模块:Module

当项目很大的时候,很多版块在一起容易混淆,希望每个版块的信息归每个版块下面,易于维护

//局部模块引用的第一个参数state都是自己模块里的
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

以moduleA为例 ,可以新建一个JS文件,然后通过import导入到总的vuex管理中

const state = {
  count: 1
};
const getters = {
  get(state) {
    return state.count;
  }
};
const mutations = {
  add(state) {
    state.count++;
  },
  reduce(state) {
    state.count--;
  }
};
const actions = {
  add: ({ commit }) => {
    commit("add");
  },
  reduce: ({ commit }) => {
    commit("reduce");
  }
};
export default {
  namespaced: true,  // 使该模块带有命名空间,使它在命名上会按路径进行命名  如moduleA/state
  state,
  getters,
  mutations,
  actions
};

在使用了模块后,我们可以通过以下方式获取,这里只用了辅助函数展示

computed: {
  ...mapState({
    count: state => state.moduleA.count
  }),
  ...mapGetters({
    get: "moduleB/get"
  })
}
methods: {
  ...mapMutations(
    'moduleA', {addA:'add', reduceB:'reduce'}    // 重命名就用对象包裹
  ),
  ...mapActions(
    'moduleA', ['add', 'reduce']
  )
}

如果想引用根目录下的状态,需要传入第三个参数

const moduleA = {
  // ...
  getters: {
    addUnit (state, getters, rootState) {    //rootState为根下的状态
      return state.count + rootState.count
    }
  }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 说说如何使用Vuex进行状态管理(小结)

    1 为什么需要状态管理 一个 Vue 组件分为数据(model)与视图(view).当通过 methods 中的方法更新数据时,视图也会自动更新. message.vue <template> <div> {{message}} <button @click="changeMessage">改变内容</button> </div> </template> <script> export default

  • Vue的状态管理vuex使用方法详解

    引入vuex 当访问数据对象时,一个 Vue 实例只是简单的代理访问.所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享 const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth }) 现在当 sourceOfTruth 发生变化,vmA 和 vmB 都将自动的更新引用它们的视图.子组件们的每个实例也会

  • 详解vuex状态管理模式

    一.前言 本次接受一个BI系统,要求是能够接入数据源-得到数据集-对数据集进行处理-展现为数据的可视化,这一个系统为了接入公司自身的产品,后端技术采用spring boot,前端采用vue+vuex+axios的项目架构方式,vuex作为vue的状态管理,是尤为重要的部分.这里,我将vuex如何运作和使用做一次总结,有错的地方,望多多提点. 二.vuex简单使用 安装vuex cnpm install vuex --save 在src目录下建立文件夹,命名为store,建立index.js 如图

  • 简述vue状态管理模式之vuex

    了解vuex核心概念请移步 https://vuex.vuejs.org/zh/ 一.初始vuex 1.1 vuex是什么 那么先来看看这两个问题: 什么是vuex?官网说:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. 按个人通俗理解来说就是:vuex就是用来管理各个组件之间的一些状态,可以理解为这些状态就是公共(共享)部分.此时任何组件都能从中获取状态或者触发一些行为事件. 什么情况下用到vuex?官网说:如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的.确实

  • Vue3状态管理的使用详解

    背景 随着Vue3的逐步应用,对状态管理的需求越来越多.起初是基于Vuex4进行状态管理的,但是Vuex4也暴露了一些问题.从个人角度来说,Vuex4类似于过渡期产品,对TypeScript的支持性并不完整.如果使用TypeScript编写组件,需要遵循一定步骤后,才可以正确进行类型推断,并且对modules的使用上也并不友好.Vuex核心贡献者Kia King也表示Vuex5已经在计划中,并且能提供完整的TypeScript支持,那么在Vuex5面世之前,或者直接"舍弃"Vuex的话

  • vue之使用vuex进行状态管理详解

    目录 vuex进行状态管理 vuex状态管理基本使用 vuex进行状态管理 首先学习vuex必须先知道vue原理 Vue是一个典型的MVVM框架,模型(Model)只是普通的JavaScript对象,修改它则视图(View)会自动更新.这种设计让状态管理变得非常简单而直观 Vue实现这种数据双向绑定的效果,需要三大模块: Observer:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者 Compile:对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更

  • vue前端开发辅助函数状态管理详解示例

    目录 mapState mapGetters mapMutations mapActions 示例 小结 mapState 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性.不使用mapState时,获取对象状态,通常放在使用组件的computes属性中,使用方式为: //.... computed: { count: function(){ return this.$store.state

  • 基于React Hooks的小型状态管理详解

    目录 实现基于 React Hooks 的状态共享 使用感受 本文主要介绍一种基于 React Hooks 的状态共享方案,介绍其实现,并总结一下使用感受,目的是在状态管理方面提供多一种选择方式. 实现基于 React Hooks 的状态共享 React 组件间的状态共享,是一个老生常谈的问题,也有很多解决方案,例如 Redux.MobX 等.这些方案很专业,也经历了时间的考验,但私以为他们不太适合一些不算复杂的项目,反而会引入一些额外的复杂度. 实际上很多时候,我不想定义 mutation 和

  • flutter自定义InheritedProvider实现状态管理详解

    目录 InheritedWidget简单数据驱动模型 1. 数据存储 2. 变更通知 3. 使用方法 InheritedWidget简单数据驱动模型 基于InheritedWidget,实现简单的数据驱动模型,模型结构如下: 1. 数据存储 使用 InheritedWidget,新建 InheritedProvider import 'package:flutter/material.dart'; class InheritedProvider<T> extends InheritedWidg

  • vue3如何使用provide实现状态管理详解

    目录 前言 如何通过 provide/inject 实现 Vuex的功能 在应用中注册此插件 插件的入口文件 创建 store ,把对应的数据挂载到根组件上 实现 mapState.mapMutations 和 mapActions方法 组件中使用 总结 前言 在 Vue 生态中, Vuex 这个官方的状态管理库在 Vue 应用开发中,为我们带来了非常便捷的功能.但是 Vuex 20K+ 的大小,也带来了一些成本,对于项目规模较小的应用来说, 引入 Vuex 只是为了存储用户信息之类的一小撮数据

  • javascript Redux的状态管理详解

    所谓的状态管理,就是对应用程序中的数据进行管理. 理念:凡是数据流管理混乱的项目,几乎都上不了线.好的项目,必须有非常良好的数据流管理. 如何使用Redux?记住“3个3”. 第1个三:3个api,createStore.combineReducers.applyMiddleware 第2个三:3个特点,store单一数据源.store只读的.只能通过reducer纯函数来修改store. 第3个三:3个概念,store.action.reducer. 基本概念: state 包含所有数据,用来

  • Mobx实现React 应用的状态管理详解

    目录 MobX 从一个 demo 开始 创建类并将其转化成可观察对象 使用可观察对象 MobX 与 React 集成 在组件中使用可观察对象 1. 访问全局的类实例 2. 通过 props 3. 通过 React Context 4. 在组件中实例化 observable class 并存储它的实例 5. 在组件中调用 observable 方法创建可观察对象 6. 在函数组件中使用 useLocalObservable 让组件具备观察能力 总结 MobX MobX 是一个状态管理库,它会自动收

  • 简化vuex的状态管理方案的方法

    在 vuejs 相关项目开发过程中,我们常常会使用 vuex 作为状态管理工具, 整个组件的状态做为单向数据流的模式管理. 事实上,在实际的使用中 vuex 可以说是相当繁琐的,每一次的需求增加需要增加 Mutations-Type . Action 和 Mutations , 为了简化这一操作,我们可以将 mutations 和 action 合并,简化流程如下: 在此种思想的引导下, muse-model 诞生了,以简单优雅的方式完成整个项目的状态管理. 什么是 muse-model mus

  • vue中使用 pinia 全局状态管理的实现

    目录 与vuex的区别 安装 引入pinia 创建状态目录 pinia模块组成 创建pinia模块 在组件中使用该状态机 pinia模块实例中的api讲解 状态持久化 与vuex的区别 去除了 mutation 选项.省去了复杂的disptach和commit流程,直接通过模块实例调用实例的actions中的方法即可触发对应action:在组件中直接可以通过模块实例的$patch修改store状态或者通过action来间接修改store状态.响应式数据原理是proxy,使得数据的增加或者删除字段

  • vue路由分文件拆分管理详解

    这里说的路由拆分指的是将路由的文件,按照模块拆分,这样方便路由的管理,更主要的是方便多人开发.具体要不要拆分,那就要视你的项目情况来定了,如果项目较小的话,也就一二十个路由,那么是拆分是非常没必要的.但倘若你开发一些功能点较多的商城项目,路由可以会有一百甚至几百个,那么此时将路由文件进行拆分是很有必要的.不然,你看着index.js文件中一大长串串串串串串的路由,也是很糟糕的. 首先我们在router文件夹中创建一个index.js作为路由的入口文件,然后新建一个modules文件夹,里面存放各

随机推荐