首页 > 其他分享> 文章详细

一文教会你认识 Vuex 状态机

2021-06-09 10:55:21 阅读：157 来源： 互联网

标签：count vue 一文状态机 state 组件 Vuex 函数

摘要：简单来说，Vuex 就是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享。

本文分享自华为云社区《Vuex状态机快速了解与应用》，原文作者：北极光之夜。

一. 速识概念：

1. 组件之间共享数据的方式：

通常有以下几种方式：

1. 父向子传值：v-bind 属性绑定；

2. 子向父传值：v-on 事件绑定；

3. 兄弟组件之间共享数据：EventBus；

2. vuex 是什么：

1. 按照官方的话来说，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

2. 简单来说，Vuex 就是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享。

3.使用 vuex 优点：

1. 能够在 vuex 中集中管理共享的数据，易于开发和后期维护。

2. 能够高效地实现组件之间的数据共享, 提高开发效率。

3. 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步。

4. 解决了非父子组件的消息传递（将数据存放在 state 中）。

5. 减少了 AJAX 请求次数，有些情景可以直接从内存中的 state 获取。

一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中。而对于组件中的私有数据，就没必要了，依旧存储在组件自身的 data 中即可。当然，如果你想要都存在 vuex 中也是可以的。

二. 基本使用：

1.安装依赖包：

npm install vuex --save

2.导入依赖包：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3.创建 store 对象：

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


Vue.use(Vuex)


const store = new Vuex.Store({
//state中存放的就是全局共享的数据
  state: {
    count: 0
  }
})

4. 将 store 对象挂载到 vue 实例中：

new Vue({
  el: '#app',
  store
})

此时所有组件就可以从 store 中获取数据了。

三.创建项目：

下面为创建一个 vue 项目流程，后面会有案例：

（1）打开 cmd 窗口输入 vue ui 打开 vue 的可视化面板：

（2）选择新建项目路径：

（3）命名：

（4）手动选择配置，注意用的是 vue2 版本：

（5）创建：

（6）下一步：

（7）创建成功，到对应目录打开 vscode 开始编程：

（8）运行项目：

四. 讲解前提：

前提（注意）：

写一个计数器小案例，从案例中配合概念能更快上手 vuex。所以下面核心概念中的代码部分是基于这个小案例来演示的。目标：写两个子组件，有一个公共 count 值，在父组件中，其中一个组件实现点击后 count 值减 1，一个组件实现点击后 count 值增 1。

父组件 App.vue 初始代码：

<template>
  <div id="app">
       <my-add></my-add>
       <p>--------------------</p>
       <my-reduce></my-reduce>
  </div>
</template>


<script>
// 引入组件
import Add from './components/Add.vue'
import Reduce from './components/Reduce.vue'
export default {
  name: 'App',
  data() {
    return {
      
    }
  },
  components: {
    'my-add': Add,
    'my-reduce': Reduce
  }


}
</script>

子组件 Add.vue 初始代码：

<template>
    <div>
        <p>count值为：</p>
           <button>+1</button>
    </div>
 
</template>
<script>
  export default{
      data() {
          return {
              
          }
      },
  }
</script>

子组件 Reduce.vue 初始代码：

<template>
    <div>
         <p>count值为：</p>
           <button>-1</button>
    </div>
</template>
<script>
  export default{
      data() {
          return {
              
          }
      },
  }
</script>

store 对象初始代码为：

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


Vue.use(Vuex)


export default new Vuex.Store({
  state: {
    count: 0
  }
})

初始效果：

五.核心概念：

1.state：

按照官方的话来说，如下：Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。

简单来说，就是 State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。

1.1 组件中访问 state 的第一种方式：

组件中直接输入以下命令：

this.$store.state.引用的数据名字

如在 Add.vue 子组件中引用：

<template>
    <div>
        <p>count值为：{{this.$store.state.count}}</p>
           <button>+1</button>
    </div> 
</template>
//下面部分代码跟前面一样无改变，所以省略了

看效果，显示了 count 的值为 0：

1.2 组件中访问 state 的第二种方式：

（1）从 vuex 中按需导入 mapState 函数

import { mapState } from 'vuex'

（2）通过刚才导入的 mapState 函数,将当前组件需要的全局数据，映射为当前组件的 computed 计算属性:

computed: {
   ...mapState([count])
}

小知识：computed 用来监控自己定义的变量，该变量不在 data 里面声明，直接在 computed 里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

如在 Reduce.vue 子组件中引用：

<template>
    <div>
         <p>count值为：{{count}}</p>
           <button>-1</button>
    </div>
</template>
<script>
import {mapState} from 'vuex'
  export default{
      data() {
          return {
              
          }
      },
      computed: {
         ...mapState(['count'])
      }
  }
</script>

看效果，同样显示了 count 的值为 0：

2. mutation：

按照官方的话来说，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

简单来说就是 Mutation 用于变更 Store 中的数据。①只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。②通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

比如，要实现 count 值自增加 1 的操作，那就在先 motations 里定义一个自增加 1 的函数。然后对应子组件想用，该组件就直接引入 mutation 并调用对应的函数就好。

如下，Add.vue 子组件要实现自增加 1 功能：先在状态机里的 mutations 里定义一个能实现自增的函数 add：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    //自增加1函数
    add(state){
      state.count++
    }
  }
})

2.1 触发 mutation 的第一种方式：

Add.vue 子组件里给按钮绑定点击事件，并触发 mutation：

<template>
    <div>
        <p>count值为：{{this.$store.state.count}}</p>
           <button @click="btnAdd">+1</button>
    </div>
 
</template>
<script>
  export default{
      data() {
          return {
              
          }
      },
      methods: {
          btnAdd() {
              // 第一种引入mutation的方式，触发add函数
              this.$store.commit('add')
          }
      }
  }
</script>

看效果实现了点击自增：

2.2 触发 mutation 并传参数：

当然，当组件里调用 mutation 里函数时，也是可以传参数的。比如，有一个自增函数，但增多少看调用时传入的参数：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    // 传入参数，第一个一定是state，第二个为传入的参数
    //自增加 n 的函数
    addN(state,n){
      state.count+= n
    }
  }
})

对应组件调用时要传入参数：

methods: {
          btnAdd2() {
              // 引入mutation的方式，触发addN函数
              // 并传参，自增加6吧
              this.$store.commit('addN',6)
          }
      }

2.3 触发 mutation 的第二种方式：

（1）从 vuex 中按需导入 mapMutations 函数

import { mapMutations } from 'vuex'

（2）通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法:

methods: {
   ...mapMutations(['add','addN'])
}

实战，实现 Reduce.vue 组件的点击自减 1 的功能要求：

状态机添加自减函数：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    //自增加1函数
    add(state){
      state.count++
    },
    // 自减1的函数
    sub(state){
      state.count--
    }
  }
})

Reduce.vue 组件点击按钮实现自减 1：

<template>
    <div>
         <p>count值为：{{count}}</p>
           <button @click="btnSub">-1</button>
    </div>
</template>
<script>
//导入
import {mapState,mapMutations} from 'vuex'
  export default{
      data() {
          return {
              
          }
      },
      computed: {
         ...mapState(['count'])
      },
      methods: {
          // 映射mutation里的sub函数
          ...mapMutations(['sub']),
          // 要自减，调用sub函数
          btnSub(){
             this.sub()
          }
      }
  }
</script>

看效果：

3.Action：

至此，第四大点里的案例已经完成，已经实现了自增和自减，现在对案例做改进，要我们点击按钮一秒后再自增和自减，该怎么实现？可以在状态机里的 mutation 里的函数是加一个 1 秒定时器吗，这肯定是不行的，因为 mutation 里不支持异步操作，那咋办，当当当，Action 闪亮登场。

Action 可以包含任意异步操作，所以它用来处理异步任务。

Action 提交的是 mutation，而不是直接变更状态。记住它并不能直接修改 state 里的数据，只有 mutation 能修改。就是说，如果通过异步操作变更数据，必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

先在状态机里定义 Action：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    //自增加1函数
    add(state){
      state.count++
    },
    // 自减1的函数
    sub(state){
      state.count--
    }
  },
  // 定义action，里面的addAsync函数实现1秒后执行mutation里的add函数
   actions: {
    addAsync(context) {
      setTimeout(()=>{
      // 必须通过context.commit（）触发mutation才行
         context.commit('add')
    },1000)
  }  
 }
})

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

3.1 触发 Action 的第一种方式：

更改组件 Add.vue 代码，引入 Action，实现异步自增操作。

<template>
    <div>
        <p>count值为：{{this.$store.state.count}}</p>
           <button @click="btnAdd">+1</button>
    </div>
 
</template>
<script>
  export default{
      data() {
          return {
              
          }
      },
      methods: {
          btnAdd() {
              // 第一种引入Action的方式，触发addAsync函数
              // 这里的dispatch专门用来调用action函数
              this.$store.dispatch('addAsync')
          }
      }
  }
</script>

看效果，实现 1 秒后自增：

3.2 触发 Action 异步任务并传参数：

当然，当组件里调用 action 里函数时，也是可以传参数的。

比如，有一个点击 1 秒后才执行的自增函数，但增多少看调用时传入的参数：

定义：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
   // 传入参数，第一个一定是state，第二个为传入的参数
    //自增加 n 的函数
    addN(state,n){
      state.count+= n
    }
  },
   actions: {
    // 有参数 n，这个n又传给了mutation里的addN函数
    addNAsync(context,n) {
      setTimeout(()=>{
         context.commit('addN',n)
    },1000)
  }  
 }
})

对应组件调用时要传入参数：

methods: {
          btnAdd2() {
              // 调用dispatch函数
              // 触发action时传参数，为 6 吧，表示自增6
              this.$store.dispatch('addNAsync',6)
          }
      }

3.3 触发 Action 的第二种方式：

（1）从 vuex 中按需导入 mapActions 函数

import { mapActions } from 'vuex'

（2）通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法:

methods: {
   ...mapActions(['add','addN'])
}

实战，实现 Reduce.vue 组件的点击一秒后自减 1 的功能要求：

定义 actions 里的 subAsync 为一秒后自减函数：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    //自增加1函数
    add(state){
      state.count++
    },
    // 自减1的函数
    sub(state){
      state.count--
    }
  },
   actions: {
    addAsync(context) {
      setTimeout(()=>{
         context.commit('add')
    },1000)
  },
   subAsync(context) {
      setTimeout(()=>{
         context.commit('sub')
    },1000)
  }    
 }
})

更改 Reduce.vue 代码，实现功能：

<template>
    <div>
         <p>count值为：{{count}}</p>
           <button @click="btnSub">-1</button>
    </div>
</template>
<script>
//导入
import {mapState,mapActions} from 'vuex'
  export default{
      data() {
          return {
              
          }
      },
      computed: {
         ...mapState(['count'])
      },
      methods: {
          // 映射Action里的函数
          ...mapActions(['subAsync']),
          // 要自减，调用subAsync函数
          btnSub(){
             this.subAsync()
          }
      }
  }
</script>

看效果：

4. Getter：

Getter 用于对 Store 中的数据进行加工处理形成新的数据。且要注意的是它并不会修改 state 中的数据。

①Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性。

②Store 中数据发生变化，Getter 的数据也会跟着变化。

如，有一个返回当前 count+1 的 getter 函数：

export default new Vuex.Store({
  state: {
    count: 0
  },
 getters: {
    showNum(state){
      return`当前count值加1为:${state.count+1}`
    }
  }
})

4.1 触发 getters 的第一种方式：

this.$store.getters.名称

在 App.vue 组件中显示：

<template>
  <div id="app">
       <my-add></my-add>
       <p>--------------------</p>
       <my-reduce></my-reduce>
       <p>--------------------</p>
       <h3>{{this.$store.getters.showNum}}</h3>
  </div>
</template>

效果：

4.2 触发 getters 的第二种方式：

（1）从 vuex 中按需导入 mapGetters 函数

import { mapGetters } from 'vuex'

（2）通过刚才导入的 mapGetters 函数,将当前组件需要的全局数据，映射为当前组件的 computed 计算属性:

computed: {
   ...mapGetters(['showNum'])
}

还是在 App.vue 中使用把：

<template>
  <div id="app">
       <my-add></my-add>
       <p>--------------------</p>
       <my-reduce></my-reduce>
       <p>--------------------</p>
       <h3>{{showNum}}</h3>
  </div>
</template>


<script>
// 引入组件
import Add from './components/Add.vue'
import Reduce from './components/Reduce.vue'
// 导入 mapGetters函数
import {mapGetters} from 'vuex'
export default {
  name: 'App',
  data() {
    return {
      
    }
  },
  components: {
    'my-add': Add,
    'my-reduce': Reduce
  },
  // 引入 getter
  computed: {
    ...mapGetters(['showNum'])
  }


}
</script>

看，一样的效果：

点击关注，第一时间了解华为云新鲜技术~

标签：count,vue,一文,状态机,state,组件,Vuex,函数
来源： https://blog.51cto.com/u_15214399/2884285

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9