VueX专题（1）

最新推荐文章于 2024-09-10 20:26:21 发布

Nathaniel333

最新推荐文章于 2024-09-10 20:26:21 发布

阅读量49

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vuex的概念

vuex是一个专为 Vue.js 应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。(简单来说就是管理数据的,相当于一个仓库,里面存放着各种需要共享的数据,所有组件都可以拿到里面的数据)

要点:

1.vue官方搭配,专属,有专门的调试工具

2.数据变化是可预测的(响应式)

3.集中式管理数据状态方案

vuex的学习内容

1.state 统一定义管理公共数据

2.mutations: 使用它来修改数据

3.getters: 类似于vue中的计算属性

4.actions: 类似于methods,用于发起异步请求,比如axios

5.modules: 模块拆分

其中最重要的内容为state和mutations

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: { // 存放数据 和data类似
  },
  mutations: { // 用来修改state和getters里面的数据
  },
  getters: { // 相当于计算属性
  },
  actions: { // vuex中用于发起异步请求
  },
  modules: {// 拆分模块
  }
})

vuex的使用

情况1：在老项目中使用。先额外安装vuex包，然后在配置。
情况2：在新项目中使用。在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的

在这里我们简单说下情况1的时候,如何使用vuex

vuex的使用

情况1：在老项目中使用。先额外安装vuex包，然后在配置。
情况2：在新项目中使用。在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的

在这里我们简单说下情况1的时候,如何使用vuex

在组件中修改state使用mutations

通过this.$store.commit('mutation事件名',mapper参数)可以修改state里面的数据

注意点

要修改vuex中的数据,就要使用mutations去修改
在methods里面$store.state.xxx = xxx这种方式虽然可以直接修改数据,但是vue不推荐,并且在严格模式下通过这种方式修改数据,会直接报错

export default new Vuex.Store({
  state: {
    num: 100,
    userinfo: {
      name:'柚子'
    },
    
  },
  mutations: {
    setname(state, newval) {
      state.num = newval
    },
  }

methods: {
    btn() {
      this.$store.state.num = 200 //不推荐这种写法,vuex所有修改数据都要写在mutations里
    },
    btnmutation() {
      this.$store.commit('setbooks',200) // 点击按钮 然后通过commit触发mutation事件
    },

vuex中用getters的派生状态

作用:在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)

在vuex中配置getters

new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
  }
})

在组件中用this.$store.getters.xxx来获取getters派生后的的值

注意: getter定义的时候,第一个参数是state,不能传第二个参数,派生的值通过return返回

Vuex-state-mutation-getters 小结

vuex中维护公共数据主要有两个要点

1.定义数据

2.提供获取/修改数据的方法

vuex中发起异步请求

前面我们已经讲过了修改数据和定义数据,那当我们想要从服务器发起请求拿数据的时候,就不可避免的要发起异步请求来获取数据,这个时候actions就可以很好的帮助我们,它可以包含任意异步请求的操作.

定义格式:

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改/保存数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})

我们可以使用Action来修改state，这一点是类似于 mutation的，不同在于：

action中可以通过调用 mutation来修改state，而不是直接变更状态。
action 可以包含任意异步(例如ajax请求)操作。

调用格式

在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

// 发ajax请求，从后端获取数据，再来去修改state中的数据
    actions: {
      getBooks (context, params) {
        console.log('getbooks的查询参数是', params)
        axios({
          url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books',
          method: 'GET'
        }).then(res => {
          console.log(res)
          context.commit('setBooks', res.data.data)
        })
      }
    },

小结

将ajax请求放在actions中有两个好处：