Vue —— VueX精讲(1）

时间  2020-06-12
标签 vue vuex 繁體版
原文   原文链接

大纲

这一讲咱们最主要的就是学习vue中的数据管理VueX，这个是一个大杀器html

1、回顾一些Promise相关的东西

Promise 有几个比较重要的方法，最重要的仍是有一个叫作all的方法，这个也是很是的强大的vue

假设咱们目前要求，但愿能按顺序的拿到前后的两个ajax那么我应该怎么处理呢ajax

Promse.all( [
new Promose( ( resolve,rejcet ) => {
        $.ajax({
            url:'xxxx',
            data:'xxxx',
            sucess:(res) => {
                resolve(res)
            }
        })
        $.ajax({
            url:'xxxx',
            data:'xxxx',
            sucess:(res) => {
                resolve(res)
            }
        })
    })

]).then( results => {
    consel.log(results)
    // 这样拿到的就是一个数组了， 前后的顺序就是里面的值
} )

注意啊这里对promise的深刻的解释说明vuex

  1. 首先咱们的两个回调resolve 还有reject注意啊，
这两个回调回调函数是 在传入的时候定义的，可是调用是在promse里调的！这两个参数是函数！！函数！！回调函数！

1、概念

Vue官方介绍
绝大多数的管方都很是喜欢用概念来解释概念，这就有点难搞了，我这个概念的都不懂，你又给我搞另外一个概念
实际上那个Vuex就是一个大管家，统一进行管理，全局的单例模式npm

1.最通俗的解释

Vuex实际上就是一个 用来放 一些组件共享的数据的，实际上这多是是下面这些状况api

  1. 登陆
    假设咱们目前有50+页面。咱们都每个页面都要发送接口请求并且这些请求须要token，那么若是我是登陆的，我就须要在每个页面拿到个人登陆token这样就形成了数据的传来传去很是麻烦，若是咱们有一个公共的地方来放这些东西就行了数组

  2. 购物车。收藏
    也会有这种组件之间打出传值的状况发生，那么我如何管理这些东西呢，这个就是一个问题promise

综上所述，咱们须要使用Vuex*sass

2、如何入门的使用

2.简单的使用

这里假设有这样的一个需求：咱们目前有两个组件App.vue 还有BMlaoli.vue 我呢，他们之间有层级的关系，app里面有一个变量叫作contuend 我但愿我在app里面对countend的操做可以动态的传递到咱们的BMlaoli里，并且不使用父子组件传值，那么咱们如何作呢？亲看下面讲演app

  1. 首先咱们须要有两个组件
    他们都是最基础的样子

App

<template>
  <div id="app">
    <h1> 我是vueapp </h1>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
</style>

BMlaoli

<template>
    <div>
        <h1>我是bm界面</h1>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="sass" scoped>

</style>
  1. app的业务逻辑
<template>
  <div id="app">
    <p>{{contuned}}</p>
    
      <button @click="contuned ++" >+</button>
      <button @click="contuned --" >-</button>

  </div>
</template>

<script>

import bmlao from '@/components/Bmlaoli';

export default {
  name: 'App',
  components: {
    bmlao,
  },
  data() {
    return {
      contuned: 100
    }
  },
}
</script>

<style>
</style>

可是问题来了，我目前但愿大家在app里面作的更改能够反映到个人Bm组件里，并且不经过父子组件的方式，那么我该怎么作呢？实际上很是的简单

这个时候咱们就须要一个 ‘第三者来处理这个东西’,这个第三者就是这个Vuex。

  1. vueX的引入

实际上，若是你有手动的安装使用配VueRouter的经验的话。这Vuex也是差很少的都是同样的使用方法

第一步：npm install vuex
第二步：建立一个文件夹sote里写一个index.js
第三部：在index里面安装
第四部：在main里挂载就行了

index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 安装
Vue.use(Vuex)

// 使用
const store = new Vuex.Store({
    state:{},
    mutations: {
    },
    actions:{},
    getters:{},
    modules:{}

})

// 倒出
export default store

main.js

import Vue from 'vue'
import App from './App.vue'

// 导入
import Store from './store'

Vue.config.productionTip = false

// 挂载
new Vue({
  Store,
  render: h => h(App),
}).$mount('#app')

很是的简单

  1. app里的业务逻辑
<template>
  <div id="app">
    <p>{{ $store.state.contuned }}</p>
    
      <button @click="$store.state.contuned ++" >+</button>
      <button @click="$store.state.contuned --" >-</button>
    
    <h1>------bmlaoli的界面--------</h1>

    <bmlao></bmlao>

  </div>
</template>

<script>

import bmlao from '@/components/Bmlaoli';

export default {
  name: 'App',
  components: {
    bmlao,
  },
  data() {
    return {
      // contuned: 100
    }
  },
}
</script>

<style>
</style>

3、正确的操做state的方式

1.须要注意的地方

$store.state.contuned

须要很是说的就是 请你不要这样去修改vuex里的值，而是经过以下的方式去修改，详细见官方api说明

  1. 概述咱们的更改逻辑
    view视图提交（Dispatch） ----> actions处理异步操做（commit） -----> Muations 记录你的修改 ，方便之后追踪（Mutate） -----> state修改（render）

  2. 代码逻辑
    /state/index.js

state:{
        contuned:1000
    },
    mutations: {
        increment(state){
            state.contuned++
        },
        decrement(state){
            state.contuned--
        },
    },
    actions:{},
    getters:{},
    modules:{}

/app.vue

<template>
  <div id="app">
    <p>{{ $store.state.contuned }}</p>
    
      <button @click="additon" >+</button>
      <button @click="subraction" >-</button>
    
    <h1>------bmlaoli的界面--------</h1>

    <bmlao></bmlao>

  </div>
</template>

<script>

import bmlao from '@/components/Bmlaoli';

export default {
  name: 'App',
  components: {
    bmlao,
  },
  data() {
    return {
      // contuned: 100
    }
  },
  methods: {
    additon() {
      this.$store.commit('increment')
    },
    subraction() {
      this.$store.commit('decrement')
      
    },
  },
}
</script>

<style>
</style>

这样咱们就能开发者工具追综这些东西的变化了

4、核心概念解读

vueX中有五个核心

1.单一状态树

  1. 管理系统 现实生活中的例子
    咱们先来举一个例子，在咱们国家一我的有不少的信息会被记录到档案管理的各个部门，车贷房贷，身份证 ，户口 ，结婚登记，这些信息都分布式的存放在各个局，地产局，户口部门......，这样对于咱们的人 来讲， 咱们的数据来来源就是多样的，多数据源，可是这样有问题，就是一块儿管理的时候是很差管理的，你可能须要去这个地方盖章，去哪一个地方改造，若是不经过又要从新回来盖章，XXXX太麻烦了。
  2. vuex的管理逻辑
    在咱们的vue中确确实实 ，你能够new 多个Vuex可是，咱们是不推荐的，由于这样管理起来就会很是的麻烦，咱们的vuex推荐是 只使用一个vuex来管理共享的数据源，这个设计理念就是；单一数据源（也叫单一状态树）

2.getter

这个东西相似于计算属性
有时候咱们须要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
高阶函数 ，返回函数的调用

  1. 需求，仍是原来的案例，我但愿我获取的contuned的平方

固然了，你这样也是能够的

<h2>{{ $store.state.contuned * $store.state.contuned }}</h2>

可是很low 是不啦，若是你要写不少不少的复杂逻辑操做，那不就凉凉了吗，因此这里引伸出咱们的getter，字面理解就是获取的时候，对数据作一些手脚，那么咱们看看如何使用

  1. 明确一下，咱们的操做基本上都是在咱们的vuex文件里面进行的

在getter里面搞事情
store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 安装
Vue.use(Vuex)

// 使用
const store = new Vuex.Store({
    state:{
        contuned:1000
    },
    mutations: {
        increment(state){
            state.contuned++
        },
        decrement(state){
            state.contuned--
        },
    },
    actions:{},
    getters:{
        powerCounter(state){
            return state.contuned * state.contuned 
        }
    },
    modules:{}

})

// 倒出
export default store

使用的时候就很是简单了
/bmlaoli.vue

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

如今咱们又有了另外一个需求，若是我想传递参数，怎么办，我但愿我过滤出一些数据，并且咱们但愿咱们是指定条件的过滤
这里就涉及到咱们的传递参数的问题了
store/index.js

fliter(state,getters){
    console.log(getters)//这里的getters实际上就是你的整个外面的getters对象 

  // 若是你要传递参数，你只能返回函数的调用
      return age => {
        state.students.filter( s => s.age >= age )
      }
    }

/bmlaoli.vue

原数据
 <h2>{{ $store.getters.students }}</h2>
过滤以后
 <h2>{{ $store.getters.fliter(40) }}</h2>

3.mutation

vuex惟一更新状态的方式,就是在这里,若是你要更改数据，vuex惟一的更改方式就是 mutation

3.1 概念

事件类型（函数名）
回调函数（回调函数，具体的业务代码）

mutations: {
//      increment 事件类型
// (state){ 回调函数
            // state.contuned++
        // },
        increment(state){
            state.contuned++
        },

        decrement(state){
            state.contuned--
        },
    },

3.2 传递参数payload负载

  1. 单个参数
  2. 多参数（传递对象）

需求：咱们但愿点击更改状态的时候的时候可传入参数
/sotre/index.js

mutations: {
        increment(state){
            state.contuned++
        },
        decrement(state){
            state.contuned--
        },
        incrementCour(state,palyload){
            consle.log(palyload)//拿到了一个传递过来的对象
        }
    },

bmlaoliu.vue3

addcCount(parmas){
this.$sore.commit( 'incrementCour' ,palyload)
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程