Vuex

于 2021-04-13 11:18:45 发布
阅读量132 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44768794/article/details/115614393
版权

Vuex

初识Vuex

Vuex是一个专门为Vue.js应用程序开发的状态管理模式
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

状态管理

简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他组件可以使用，那么多个组件就可以共享这个对象中的所有变量属性了

2.1 单界面的状态管理

State：状态 (姑且当作是data中的属性)
View：视图层，可以根据不同的State，显示不同的信息
Actions：主要表示用户的各种操作：点击、输入等等，会导致状态的变化

在下面这个例子中，counter就是状态管理对象
1.counter需要某种方式被记录下来，也就是State
2.counter的值需要被显示在界面中，也就是View
3.界面发生某些操作时，需要去更新状态，也就是Actions

App.vue

<template>
  <div id="app">
    <h2>---------app内容-------</h2>
    <button @click="$store.state.counter++">+</button>
    <button @click="$store.state.counter--">-</button>
    <h2>---------hello-vuex内容-------</h2>
    <hello-vuex :counter = 'counter'></hello-vuex>
  </div>
</template>

<script>
// 把HelloVuex用起来
import HelloVuex from './components/HelloVuex'
export default {
  name: 'App',
  // 注册组件
  components: {
    HelloVuex
  },
  data() {
    return {
      message: '我是App组件',
      counter: 0
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

HelloVue.vue

<template>
  <div>
    <h2>{{$store.state.counter}}</h2>
  </div>
</template>
<script>
export default {
  name: 'HelloVuex',
  props: {
    counter: Number
  }
}
</script>

main.js

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './store'

Vue.config.productionTip = false

Vue.prototype.$store = store

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

index.js

import Vue from 'vue'
import Vuex from 'vuex'

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

// 2.创建对象
const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations:{

  },
  actions: {

  },
  getters: {

  },
  modules: {
    
  }
})

// 3.导出store共享

2.2 多界面的状态管理

当多个视图都依赖于同一个状态
这时候就需要一个大管家来统一帮助我们管理这个状态
Vuex就是位我们提供这个大管家的工具

全局单例模式(大管家)
将共享的状态抽离出来，交给大管家，统一进行管理
之后的每个视图，都要按照规定，进行访问个修改等操作

在这里插入图片描述

Devtools

Vue 开发的一个浏览器插件
https://www.crxdl.com

在这里插入图片描述

2.3 案例

1.新建文件夹store，并且在其中创建index.js文件
2.让所有的Vue组件都可以使用这个store对象
到main.js文件，导入store对象，并且放在new Vue中
这样，在其他Vue组件中，就可以通过this.$store的方式，获取到这个store了

index.js

import Vue from 'vue'
import Vuex from 'vuex'

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

// 2.创建对象
const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations:{
    // 定义方法
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  },
  actions: {

  },
  getters: {

  },
  modules: {
    
  }
})

// 3.导出store共享
export default store

main.js

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './store'

Vue.config.productionTip = false

Vue.prototype.$store = store

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

App.vue

<template>
  <div id="app">
    <h2>---------app内容-------</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <h2>---------hello-vuex内容-------</h2>
    <hello-vuex :counter = 'counter'></hello-vuex>
  </div>
</template>

<script>
// 把HelloVuex用起来
import HelloVuex from './components/HelloVuex'
export default {
  name: 'App',
  // 注册组件
  components: {
    HelloVuex
  },
  data() {
    return {
      message: '我是App组件',
      counter: 0
    }
  },
  methods: {
    addition() {
      this.$store.commit('increment')
    },
    subtraction() {
      this.$store.commit('decrement')
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

HelloVuex.vue

<template>
  <div>
    <h2>{{$store.state.counter}}</h2>
  </div>
</template>
<script>
export default {
  name: 'HelloVuex',
  props: {
    counter: Number
  }
}
</script>

在这里插入图片描述

Vuex核心概念

3.1 State

保存共享状态相关信息

单一状态树

即单一数据源
只创建一个store对象，使用单一状态树来管理应用层级的全部状态
单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护
只有一个store


// 2.创建对象
const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations:{
    // 定义方法
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  },
  actions: {

  },
  getters: {

  },
  modules: {
    
  }
})

3.2 Getters

功能是将state里面的内容进行处理之后传递
Getters作为参数和传递参数
使用方式一：
index.js中定义

getters: {
    powerCounter(state) {
      return state.counter * state.counter
    },
    more15(state) {
      return state.student.filter(s => s.age > 15)
    }
  },

App.vue中使用

    <h2>{{$store.getters.more15}}</h2>
    <h2>{{$store.getters.powerCounter}}</h2>

使用方式二：
index.js中定义

    more15Length(state, getters) {
      return getters.more15.length
    },
    moreAge(state) {
      return age => {
        return state.student.filter(s => s.age > age)
      }
    }

App.vue中使用

    <h2>{{$store.getters.more15Length}}</h2>
    <h2>{{$store.getters.moreAge(12)}}</h2>

3.3 Mutation

Mutation同步函数
Vuex要求Mutation中的方法必须是同步方法
如果是异步方法，那么dextools将不能很好的追踪这个操作何时完成
Vuex的store状态更新的唯一方式： 提交Mutation
Mutation包括两部分：
字符串的事件类型(type)
一个回调函数，该回调函数的第一个参数就是state
index.js

 mutations: {
    // 定义方法
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
    incrementCount(state) {
      state.counter += count
    },
    addStudent(state, stu) {
      state.student.push(stu)
    }
  },

App.vue

    addCount(count) {
      // count专业名词叫playload  负载 (参数不止一个时)
      this.$store.commit("incrementCount", count);
    },
    addStudent() {
      const stu = { id: 114, name: "z", age: 15 };
      this.$store.commit("addStudent");
    }

mutation实现的两种风格

普通风格
通过commit提交的是普通风格

    addCount(count) {
      // count专业名词叫playload  负载
       this.$store.commit("incrementCount", count);
      })
    },

    incrementCount(state,count) {
      state.counter += count
    },

另一种风格
Vue还提交了另一种风格，他是一个包含type对象的属性

    addCount(count) {
      // count专业名词叫playload  负载
      this.$store.commit({
        type: "incrementCount",
        count,
        age: 18
      })
    },

Mutation的出路方式是将整个commit的对象作为payload使用，所以代码没有改变

    incrementCount(state,payload) {
      state.counter += payload.counter
    },

mutation的响应式原理

    info: {
      name: 'kobe',
      age: 40,
      height: 1.98
    }

这些属性会加入响应式系统中，二响应式系统会见厅属性的变化，当属性发生变化时，会通知所有界面中用到该属性的地方，让界面发生改变

让属性加入响应式系统必须遵守一些Vuex对应的规则
1.提前在store中初始化好所需的属性
2.当给state中的对象添加新属性时，用以下两种方式

  Vue.set(state.info,address,'北京')
  Vue.delete(state.info, 'age')

mutation的类型常量

新建Mutation-type.js存放常量

export const INCREMENT = "increment"

index.js中导入和定义方法相应改变

import { INCREMENT } from './mutation-types'

  mutations: {
    // 定义方法
    [INCREMENT](state) {
      state.counter++
    },
   }

App.vue

    addition() {
      this.$store.commit(INCREMENT);
    }

3.4 Action

当有异步操作时，一定在actions中完成

  actions: {
    // context: 上下文
    // aUpdateInfo(context, payload) {
    //   setTimeout(() => {
    //     context.commit('updateInfo'),
    //     console.log(payload.message);
    //     payload.success()
    //   },1000)
    // }
    aUpdateInfo(context,payload) {
      return new Promise((resolve,reject) => {
        setTimeout(() => {
          context.commit('updateInfo'),
          console.log(payload);
          resolve('1111')
        },1000)
      })
    }
  },

action本身可以返回一个Promise
App.vue 中可以通过dispatch拿到Promise，.then继续使用Promise

    updateInfo() {
      // this.$store.dispatch('aUpdateInfo',{
      //   message: '我是payload，携带信息哦',
      //   success: () => {
      //     console.log('里面已经完成了');
      //   }
      // })
      this.$store
      .dispatch('aUpdateInfo','我是payload携带信息哦')
      .then(res => {
        console.log('里面完成了提交');
        console.log(res);
      })
    }

3.5 Module

Module是模块：
① Vue使用单一状态树，就意味着很多状态都交给Vuex来管理
② 当应用变得复杂时，store对象就有可能变得相当臃肿
③ 为解决这个问题，可以在modules中定义多个模块，每个模块都有一个state、getters、mutations、actions
(●’◡’●)

index.js

  modules: {
    // 可以在modules中定义多个模块，每个模块都有一个state
    a: moduleA
  }

const moduleA = {
  state: {
    name: 'zzy'
  },
  getters: {
    fullname(state) {
      return state.name + '111'
    },
    fullname2(state, getters) {
      return getters.fullname + '222'
    },
    fullname3(state, getters, rootState) {
      return getters.fullname2 + rootState.counter
    }
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  actions: {
    // 一般进行异步操作
    aUpdateName(context) {
      // 提交同一对象内的mutations
      setTimeout(() => {
        context.commit('updateName','ying') 
      },1000)
    }
  }
}

App.vue

    updateName() {
      // 只要是提交就是commit
      this.$store.commit('updateName','lv')
    },
    asyncUpdateName() {
      this.$store.dispatch('aUpdateName')
    }

在这里插入图片描述

点击修改名字
在这里插入图片描述
点击异步修改名字
在这里插入图片描述

项目目录组织

在这里插入图片描述
index.js

import Vue from 'vue'
import Vuex from 'vuex'
import { INCREMENT } from './mutation-types'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import moduleA from './modules/moduleA'

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


const state =  {
  counter: 0,
  student: [
    { id: 100, name: 'a', age: 18 },
    { id: 101, name: 'b', age: 19 },
    { id: 102, name: 'c', age: 11 },
    { id: 103, name: 'd', age: 12 },
  ],
  info: {
    name: 'kobe',
    age: 40,
    height: 1.98
  }
}
// 2.创建对象
const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    // 可以在modules中定义多个模块，每个模块都有一个state
    a: moduleA
  }
})

// 3.导出store共享
export default store

getters示例

export default {
  powerCounter(state) {
    return state.counter * state.counter
  },
  more15(state) {
    return state.student.filter(s => s.age > 15)
  },
  more15Length(state, getters) {
    return getters.more15.length
  },
  moreAge(state) {
    return age => {
      return state.student.filter(s => s.age > age)
    }
  }
}
cb++
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
VueX
qq_65345936的博客
09-15 760
1、加载以来 npm install vuex -s下载Vuex最新版本的依赖。3、将vuex对应的index.js文件挂载到main.js的Vue实例中。2、导入vuex的核心4个组件，然后通过index.js加载进来。在Package.js里会出现所下载Vuex版本。上下文参数，注意，这个参数可不一般，它与。Vuex版本问题及store.js的使用。版本的，版本不同的话效果出不来）4、测试Vuex的存储变量的功能。Vuex中的存值、取值获取变量值。四、Vuex中的异步同步操作。可以包含任意异步操作。
Vuex详解.pptx
08-05
"Vuex详解" Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态管理到底是什么？ 状态...
react native 使用ImageCropPicker 七牛云上传图片
愿你走过半生，归来任是少年。
08-31 823
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管...
VUEX
qq_40088443的博客
03-12 783
Vuex 是专门为 Vue.js 设计的状态管理库适用于构建一个中大型单页应用， 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是更新的。 通过显式地提交(commit) mutation改变 store 中的状态：store.commit...
vuex
探鱼不是鱼
11-30 3552
vuex是什么 github站点: https://github.com/vuejs/vuex 在线文档: https://vuex.vuejs.org/zh-cn/ 简单来说: 对vue应用中多个组件的共享状态进行集中式的管理(读/写) 状态自管理应用 state: 驱动应用的数据源 view: 以声明方式将state映射到视图 actions: 响应在view上的用户输入导致的状态变化(包含n个更新状态的方法) 流程 actions函数内部调用commit触发某个mu
vue实现将数据存入vuex中以及从vuex中取出数据
10-16
Vue.js 是一款流行的前端框架，而 Vuex 是 Vue 的状态管理库，它帮助开发者集中管理和共享应用的状态。在大型 Vue 项目中，Vuex 可以有效地解决组件间的数据通信问题，使得状态管理更加有序和可追踪。本篇文章将详细...
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
10-17
在现代前端开发中，Vue.js作为一个流行的JavaScript框架，配合Vuex状态管理库能够很好地处理组件间的状态共享与管理问题。但在单页面应用（SPA）中，页面刷新会导致应用状态（state）丢失的问题一直存在，这个问题...
vuex-webextensions：一个Vuex插件，可通过webextensions组件共享存储
02-02
Vuex Web扩展 一个Node.JS模块，用于在“共享”上下文中在WebExtensions上使用Vuex，该模块允许您启动Vuex存储的多个实例，并使它们通过WebExtensions消息传递API保持同步。 将后台脚本上的Vuex存储实例用作主实例...
vuex-i18n：使用vuex作为存储的vue.js 2.0本地化插件
02-28
vuex-i18n 我们是很棒的vue，vuex和vue-router库的忠实拥护者，他们只是在寻找易于使用的国际化插件，并尽可能多地使用“标准库”。 与其他国际化插件的主要区别是直接在应用程序中或以后从服务器直接使用和支持...
顶尖电子称条码秤LS系列称固件，最新固件，固件
08-28
顶尖电子称条码秤LS系列称固件，最新固件，固件
爬取淘宝热销(热门)咖啡商品信息数据集
08-28
本资源旨在收集淘宝平台上热销咖啡商品的相关信息，包括但不限于：店铺所在省份、城市位置、商品名称、销售价格、销量数据、单价（以人民币计）、付款人数、是否提供包邮服务、是否来自天猫平台以及满减优惠的详细信息。这些信息均来源于淘宝平台的公开透明数据，可供学习参考之用。请注意，本资源仅用于学术研究和个人学习目的，不得用于商业用途或其他非法活动。
爬取的淘宝新品推荐男装商品信息公开透明数据集
08-28
本资源专注于收集淘宝平台最新推荐的男装商品信息，内容涵盖商品的店铺所在省份、城市位置、商品的名称、销售价格、累积销量、单价（以人民币计价）、付款的顾客人数、是否提供包邮服务、是否为天猫平台的商品，以及相关的满减优惠情况。这些详细的数据点均来源于淘宝平台的公开透明信息，经过精确抓取和整理，旨在为分析电商平台上的新品推荐策略和消费者购买行为提供实用数据。 这些数据严格遵循淘宝平台的公开政策和隐私保护原则获取，确保了信息的合法性与合规性。然而，本资源仅作为学习参考之用，意在帮助研究人员、市场分析师或学生等理解电商领域的商品推荐机制、销售动态及市场趋势。 任何将此数据用于商业目的或其他未授权的活动都是不恰当的，甚至可能触犯相关法律条款。 在使用这些数据进行学术研究或个人学习时，用户应自觉遵守相关法律法规，尊重数据来源和版权，正确引用数据源，并不得用于任何形式的商业盈利。
STM32F4的环境配置，可直接运行STM32F4系列的芯片
08-28
STM32F4的环境配置，可直接运行STM32F4系列的芯片
技术资料PCB资料模拟电子技术资料03j.zip
08-28
技术资料PCB资料模拟电子技术资料03j.zip
全国大学生电子设计大赛项目合集射频无线资料雷达接收机灵敏度自动测试方案设计
08-28
全国大学生电子设计大赛项目合集射频无线资料雷达接收机灵敏度自动测试方案设计提取方式是百度网盘分享地址
da_1724814826825 (1)
08-28
da_1724814826825 (1)
单片机实现的超声波测距与显示模块.md
08-28
如何利用单片机实现超声波测距与显示模块，包括从硬件设计到软件编程的全方位内容。首先，介绍了超声波测距的基本原理，使用超声波模块（如HC-SR04）通过发射和接收超声波信号来测量距离，并通过公式计算距离。接着，阐述了单片机（如STC89C52、ATmega328）如何与超声波模块连接，以及电路设计细节。软件部分涵盖了如何编写单片机程序以触发超声波发射、测量回波时间，并计算距离。代码示例展示了如何使用计时器测量回波时间，并通过LCD显示距离。最后，文章还包括了调试与优化建议，如硬件连接检查、软件调试方法及性能优化策略，以确保系统的准确性和稳定性。
计算机软件著作权程序鉴别材料（源代码）提取器_extractor.zip
最新发布
08-28
计算机软件著作权程序鉴别材料（源代码）提取器_extractor
vuex mapstate
05-30
Vuex是Vue.js的状态管理库，它提供了一个集中式的存储管理方案。在大型的Vue.js应用程序中，管理组件的状态可能会变得非常复杂，使用Vuex可以更好地组织和管理这些状态。 Vuex中有一个重要的概念是store，它是一个...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值