VueX中State和mutation的用法

最新推荐文章于 2023-06-17 10:47:29 发布

流萤604

最新推荐文章于 2023-06-17 10:47:29 发布

阅读量587

点赞数

文章标签：前端 javascript 开发语言

原文链接：http://t.csdn.cn/Btdp8

版权

Vuex 的详细介绍请查看官方文档：Vuex 是什么？ | VuexVue.js 的中心化状态管理方案https://vuex.vuejs.org/zh/ 1、VueX是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
 
// 也就是说
 
* VueX是适用于在Vue项目开发时使用的状态管理工具。
 
// 什么情况下使用 
 
试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。
 
* 为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。
 
// 使用
 
* 在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。
* 存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，例如状态对象必须是纯粹 (plain) 的

2、核心概念

Vuex 的核心概念由五部分组成：State (存放状态)、Getter (加工state成员给外界)、Mutation (state成员操作)、Action (异步操作)和 Module (模块化状态管理)。

3、 State 单一状态树

 state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，
 只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态
 
* 用一个对象就包含了全部的应用层级状态。
* 每个应用将仅仅包含一个 store 实例。
 
至此它便作为一个“唯一数据源 (SSOT)”而存在。
单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

简单理解：把需要做状态管理的量放到这里，然后在后面的操作中去操作它（比如修改值）

3.1 怎么在 Vue 组件中获得 Vuex 状态？

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

// 简单的 Store 示例代码
 
//store 文件夹下的index.js
 
import Vue from 'vue'
 
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
 
  state: {
 
    //这里放全局参数
    count: 20201029
 
  },
 
  mutations: {
 
    //这里是set方法
 
  },
 
  getters: {
 
    // 这里是get方法  
  }
 
})

然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。

* 所以 Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：

// main.js
 
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store/index.js';
Vue.use(Vuex)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,    // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  components: { App },
  template: '<App/>'
})

* 通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

mapState
 
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
 
所以我们可以使用 mapState 辅助函数来帮助我们生成计算属性:
 
// 在单独构建的版本中辅助函数为 Vuex.mapState
<template>
  <div class="test">
    {{count}}
  </div>
</template>
 
<script type="text/ecmascript-6">
import {mapState} from 'vuex'
export default {
  name: "test",
  data() {
    return {
      
    };
  },
   computed:mapState({    
      // 箭头函数可使代码更简练
      count:state => state.count
    }),
  mounted() {
      
  },
};
</script>
 
<style>
</style>

`3、mutation` 是操作`state`数据的方法的集合，比如对该数据的修改、增加、删除等等。

// index.js
 
const store = new Vuex.Store({
  state: {
    todos: [
       { id: 1, text: '文本1', done: true },
       { id: 2, text: '文本2', done: false }
    ],
  },
  mutations: {
    increment (state) {
       changeName(state) {
      // 变更name
        state.todos[1].text = "MrBai"
    }
    }
  }
})

// test.vue
 
<template>
  <div class="test">
    {{this.$store.getters.getTodoById(2)}}  
 
  //点击按钮触发事件后
 // { id: 2, text: 'MrBai', done: false }
  
    <button @click="changeName()">修改name</button>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from "vuex";
export default {
  name: "test",
  data() {
    return {
    };
  },
  computed: {
     doneTodosCount () {  
       return this.$store.getters.doneTodosCount
  }
  },
  mounted() {
    // console.log(this.$store.getters.getTodoById(2))  // { id: 2, text: '文本2', done: false }
  },
  methods:{
     changeName(){
       // 注意，我们不能直接 store.mutations.increment() 来调用，Vuex 规定必须使用 store.commit 来触发对应 type 的方法：
       this.$store.commit('changeName')
     }
  }
};
</script>
 
<style>
</style>

提交载荷（Payload）:

你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：

//index.js
 
export default new Vuex.Store({
 
  state: {
    count:1
  },
 
  mutations: {
 
    //这里是set方法
      changeCount(state,num) {
      // 变更count
        state.count += num
    }
  },
 
  getters: {
    getCount:(state) =>(count) =>{
      return state.count
    }
  }
 
})

//test.vue
 
 <button @click="changeCount()">修改count</button>
 
 
methods:{
     changeCount(){
       this.$store.commit('changeCount',66)
     }
  }

一些面试题

1、vuex中actions和mutations有什么区别？

mutations可以直接修改state，但只能包含同步操作，同时，只能通过提交commit调用(尽量通过Action或mapMutation调用而非直接在组件中通过this.$store.commit()提交)
actions是用来触发mutations的，它无法直接改变state，它可以包含异步操作，它只能通过store.dispatch触发。

2、vuex的action和mutation的特性是什么？有什么区别？

Action

一些对 State 的异步操作可放在 Action 中，并通过在 Action 中 commit Mutation 变更状态
Action 可通过 store.dispatch() 方法触发，或者通过 mapActions 辅助函数将 vue 组件的 methods 映射成 store.dispatch() 调用

　 Mutation