vue 中的 【 vuex】

文章目录

• vue 的网址 ：Vue.js
• 二、什么时候我们会使用它？

前言

Vuex是Vue的核心插件 ，今天我们来学习并认识 Vuex

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vuex是什么？

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

二、什么时候能使用到Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

三、vuex中的五大核心概念

1.State

state 存放数据 ， 单一状态树

代码如下（示例）：

state: {
    num : 0 // 可以定义变量 
  },

**变量的数据类型 **：Number, String, Boolean, Array, Object 基本的数据类型

在页面上获取state中的数据 ：

通过 插值表达式 {{}} 在页面上渲染 在State 中定义的num值

{{this.$store.state.num}}

2.Getters

Getters 计算属性

代码如下（示例）：

getters: {
    //计算总数
    znum(state){
      let nums = 0 ;  //定义一个变量
       state.num.forEach( (item)  => {
         nums  += item.num   //通过foreach 循环 相加
       });
       return nums    //把得到的数 return 出去
    }
  },

在页面上使用 计算出的数据 ：

 {{  this.$router.getters.znum  }}  

3.Mutations

Mutations 是写方法的 业务逻辑的
     在页面上发送请求 ：

 methods: {
    //一个添加事件
    add(){
        //发送请求
        this.$store.commit( '自定义事件名' . '传递的参数' ） 
     }
}

通过 Mutations 接收

 mutations: {
    // state 是获取存放的数据  val ： 是接收页面传递的参数
    add( state , val ){
      //逻辑代码
    }
  },

4.Actions

Actions是写异步的操作

     在页面上发送请求 ：

 methods: {
    //一个添加事件
    add(){
        //发送请求
        this.$store.dispatch( '自定义事件名' . '传递的参数' ） 
     }
}

通过 Actions接收

 Actions: {
    // state 是获取存放的数据  val ： 是接收页面传递的参数
    add( state , val ){
      //逻辑代码
    }
  },

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用

context.commit

提交一个 mutation，或者通过

context.state

和

context.getters

来获取 state 和 getters。

5.modules

modules是 分割模块

应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
store.state.a // -> moduleA 的状态

总结

1、Vuex 是一个Vue.js 的状态管理模式 + 库

**2. Vuex 的五大核心 比较重要的 **