vuex的五个属性

·  阅读 977

vuex是什么?

vuex简单来说就是vue官方提供的一个独立于组件体系之外,管理公共数据的一个工具,采用集中式存储管理应用的所有组件的状态,解决多个组件之间的通信

要点:

  1. vue官方搭配,专属使用 (类似于:vue-router),有专门的调试工具
  2. 集中式管理数据状态方案 (操作更简洁)data() { return { 数据, 状态 }}
  3. 数据变化是可预测的 (响应式)

重点

vuex是vue官方提供的独立于组件体系之外的,管理公共数据的工具

1.png

使用场景

大型项目,需要用到复杂的组件之间的传值


vuex 中 state与actions和mutations的关系图 vuex.png

8.png

vuex在项目中的使用情况

  1. 在旧项目中先额外配置安装vue包,然后再配置
    npm i vuex 

配置:

  • 在src根目录创建一个store的文件夹

6.png

在store/index.js 中放置具体的代码,具体如下:

7.png

向Vue实例注入store

在src/main.js中:

  1. 导入store
  2. 并注入Vue实例
// 省略其他
// 1. 导入store
import store from './store' 

new Vue({
  // 省略其他...
  store // 2. 注入Vue实例
})

2.在新项目中使用,自定义配置项,在配置vue-cli中创建项目时,就可以直接选中vuex项,这样就不用做任何配置了(脚手架会自动帮我们完成的)。具体如下图示:

5.png

在组件中使用store

在任意组件中,通过this.$store.state 来获取公共数据

Vuex的学习内容

Vuex中有5个内容需要学习:

  1. state: 统一定义公共数据(类似于data(){return {a:1, b:2,xxxxxx}})
  2. mutations : 使用它来修改数据(类似于methods)
  3. getters: 类似于computed(计算属性,对现有的状态进行计算得到新的数据-------派生 )
  4. actions: 发起异步请求
  5. modules: 模块拆分

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

3.png

state----保存公共数据

state的作用

vuex用它来保存公共的数据

  1. 如何全局使用state

格式: new Vuex.store({ state: { 属性名: 属性值 } })

使用公共数据

格式:

在组件中,通过this.$store.state.属性名来访问。

在模板中,则可以省略this而直接写成: {{$store.state.属性名}}

代码示例:

可以是对象,可以是数组 2.png

小结

state的作用是:保存公共数据(多组件中共用的数据)

state是响应式的: 如果修改了数据,相应的在视图上的值也会变化。


mutations----修改公共数据

作用:

通过调用mutations来修改定义在state中的公共数据

4.png

定义格式: 如下

new Vue.store({
  // 省略其他...
  mutations:{
    // 每一项都是一个函数,可以声明两个形参
    mutation名1function(state [, 载荷]) {
  
    },
    mutation名2function(state [, 载荷]) {
  
    },
    }
})

每一项都是一个函数,可以声明两个形参:

  • 第一个参数是必须的,表示当前的state,在使用时不需要传入
  • 第二个参数是可选的,表示payload载荷,它可以是任何形式的类型的值

使用格式

this.$store.commit('mutation名', 实参,给第二个参数)

这里的commit是固定的方法

示例

5.png

getters----计算得到新的数据--派生

作用

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

  • 定义数据:
  • 提供获取/修改数据的方法

06.png 例如:计算总价

new Vuex.store({
  state: {
    books: [
      {
        "name": "javasript技术内幕",
        "price": 100,
        "img": "https://img3m7.ddimg.cn/64/26/29120617-1_u_8.jpg"
      },
      {
        "name": "数学之美",
        "price": 44,
        "img": "https://img3m2.ddimg.cn/18/30/28538352-1_b_5.jpg"
      },
      {
        "name": "认知天性",
        "price": 40,
        "img": "https://img3m3.ddimg.cn/74/33/1732997153-3_u_3.jpg"
      }
    ]
  }
})

定义格式

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

state 就是上边定义的公共数据state

使用格式

在组件中通过:$store.getters.getter的名字 来访问

小结

它的作用是从已有公共数据项中派生出新的数据项,类似于computed

actions----发异步请求

作用

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

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

定义格式

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

参数:

action的名字: function(context, 载荷) {

第一个参数:context,执行的上下文对象,相当于组件中的this.$store store的运行实例

}

调用格式

在组件中通过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)
        })
      }
    },

小结

action一般用来发异步请求,数据回来之后,在去调用mutations来保存数据

7.png

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

  • 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。
  • 逻辑更通顺。如果数据需要保存在Vuex的state中,那从接口处获取数据的操作就定义在Vuex的actions中。

modules----来拆分复杂业务

modules的作用

拆分模板,把复杂的场景按模块来拆开

格式

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
  	模块名1: {
    		// namespaced为true,则在使用mutations时,就必须要加上模块名
      	namespaced: true, 
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
  			modules: {}
  	},
    模块名2: {
        // namespaced不写,默认为false,则在使用mutations时,不需要加模块名
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
         modules: {}
  	}  
  }
})

访问数据和修改数据的调整

  • 访问模块中的数据,要加上模块名

    获取数据项:  {{$store.state.模块名.数据项名}}
    获取getters: {{$store.getters['模块名/getters名']}}
    
  • 访问模块中的mutations/actions:

    • 如果namespaced为true,则需要额外去补充模块名
    • 如果namespaced为false,则不需要额外补充模块名
    $store.commit('mutations名')        // namespaced为false
    $store.commit('模块名/mutations名')  // namespaced为true
    

小结

使用了modules之后,在访问数据时就要额外添加modules的名字了。

结论: 在使用modules时,建议都给加上namespaced!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改