vue 中的 【 vuex】

文章目录

• 前言  
• vue 的网址 ：Vue.js
• 一、什么是vuex？
• 二、什么时候我们会使用它？
• 三、vuex五大核心有哪些？分别有什么作用 ？ 
  • 1.State
  • 2.Getters
  • 3.Mutations
  • 4.Actions
  • 5.Modules
• 总结

---

前言

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 的五大核心  比较重要的