VueX的基本使用,一站式教程

·  阅读 508

Vuex-基本介绍

目标

  • 掌握什么是vuex
  • 了解vuex解决的问题

问题导入

抽象一下这个问题:

思考,如何实现一处数据的修改能同步到其他的组件?

回顾组件关系和通信方案

序号组件关系数据通信
1父子关系子传父:props ; 父传子:$emit
2非父子关系eventBus:   on + on  +  emit
3非父子关系vuex

和我们已经学过的父子通信和兄弟通信类似,vuex也是一种组件通信解决方案

Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式, 采用集中式存储管理应用的所有组件的状态,解决多组件数据通信。

要点:

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

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

使用场景

大型项目

小结

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

Vuex-学习内容

目标

了解vuex的学习内容

Vuex的学习内容

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

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

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

小结

五个概念:state,  mutations,  getters, actions, modules

Vuex-在Vue项目使用Vuex

目标

掌握在vue项目中使用vuex的方式

两种情况

  1. 情况1:在老项目中使用。 先额外安装vuex包,然后在配置。
  2. 情况2:在新项目中使用。 在配置vue-cli中创建项目时,就可以直接选中vuex项,这样就不用做任何配置了(脚手架会自动帮我们完成的)。具体如下图示:

这里只说明第1种情况。

在旧项目中使用vuex

假设之前已经有一个vue项目了,其中并没有使用vuex,现在我们来用一下。

注意,这里省略用vue脚手架创建项目的过程。

整体步骤:

  1. 安装。它是一个独立的包,需要先安装。
  2. 配置
    1. 创建Vuex.store实例
    2. 向Vue实例注入store
  1. 使用。在组件中使用store

安装包

进入项目目录,安装包

npm install vuex@3.6.2

开发依赖 : npm i xxxx --save-dev ;  npm i xxxx -D ;

生产依赖: npm i xxxx --save ;            npm i xxxx -S;     npm i xxxx

实例化store

与router一样,当我们在项目中使用vuex之后,为了方便代码维护,我们一般需要做特殊的目录调整,约定的结构如下:

根组件
└── src
    ├── main.js
    ├── router
    │   └── index.js   # 路由
    └── store
        └── index.js   # vuex
复制代码

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

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state(){
    return {
      // 就是公共的数据,所有的组件都可以直接使用
      count: 100
    }
  }
})
export default store
复制代码

向Vue实例注入store

在src/main.js中:

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

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

在组件中使用store

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

小结

在老项目中使用vuex的步骤

  1. 安装。它是一个独立的包,需要先安装。注意版本号,目前学的是vue2,所以版本号 vuex@3.x.x
  2. 配置
    1. 创建Vuex.store实例(有固定代码,类似于vue-router;不需要记忆)
    2. 向Vue实例注入store
  1. 使用。在组件中使用store。
    1. 代码:this.$store.state
    2. template: {{$store.state}}

Vuex-state定义公共数据并在组件中使用

目标

掌握state的使用方式

state的作用

vuex用它来保存公共数据

定义公共数据

格式

new Vuex.store({
  state() {
    return {
       属性名: 属性值 
    }
  }
})
复制代码

示例

new Vuex.store({
  state(){
    return {
      userInfo: {
         name: 'tom',
         skills: ['抖音', 'B站', '美团'],
         address: '武汉黑马',
         logo: 'https://vuejs.org/images/logo.svg'
         //  https://www.runoob.com/wp-content/uploads/2016/02/react.png
      }
    }
  }
})
复制代码

使用公共数据

格式:

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

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

vue-devtool调试工具

在调试工具中查看。

小结

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

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

Vuex-用mutations修改公共数据

目标

掌握mutations的作用及格式; 能用它来修改state

作用

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

格式

分两个格式: 定义格式,调用格式

定义格式: 如下

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

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

  • 第一个参数是必须的,表示当前的state。在使用时不需要传入
  • 第二个参数是可选的,表示载荷,是可选的。在使用时要传入的数据

使用格式

this.$store.commit('mutation名', 实参)
复制代码

这里的commit是固定的方法

示例

store/index.js中,补充:

  • 数据项
  • 更新数据项url的mutations
export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {
    userInfo: {
       name: 'tom',
	 	   skills: ['抖音', 'B站', '美团'],
    	 address: '武汉黑马',
       logo: 'https://vuejs.org/images/logo.svg'
       //  https://www.runoob.com/wp-content/uploads/2016/02/react.png
    }
  },
  // mutations: 用它提供修改数据的方法
  //   中文是:变化,异动。
  //   数据不应该在组件内部直接修改,必须在组件内调用mutations来修改
  mutations: {
    setLogo(state, newUrl) {
      state.userInfo.logo = newUrl
    }
  }
}
复制代码

在组件中,调用

const url = 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
this.$store.commit('changeUrl', url)
复制代码

图示

在devtool中观察

打开调试工具,查看效果

小结

mutations的中文含义是:变异。 它是Vuex中用来修改公共数据的唯一入口。

在定义时:它的第一个参数是state,第二个参数是载荷

在调用时:用 this.$store.commit('mutation名', 载荷) 来调用

Vuex-mutaions拓展理解

问:为啥是$store.commit('mutations的名字')而不是$store.mutations的名字()?

答:Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler) 。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。

问:数据不可以该在组件内部直接修改吗?

答:不能。虽然语法上不报错,也有响应式的特点。但是不推荐。特别是在严格模式下会报错。若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作,只要不经过 mutation的函数,vue就会报错

问:可以传递多个数据吗?

答:参数只能有一个:下面的写法是不对的:

this.$store.commit('setUrl', url, host) // host这个参数将无法被接收到
复制代码

如果希望传递复杂的数据,第二个参数可以是对象,例如下面的写法

this.$store.commit('setUrl', { url, host} )
复制代码

问:等价写法 this.$store.commit({type: 'mutations的名字'})

小案例-发请求取数据做保存

目标

综合使用axios, mutation, state

任务描述

我们希望在某组件创建成功之后:

  1. 请求后端接口(www.liulongbin.top:3009/api/getbook…)处获取数据
  2. 保存数据到state中

思路

组件created钩子函数中:

  • 发ajax请求(用axios库),获取数据
  • 调用mutations保存数据到vuex
  • 在组件中使用数据

代码

app.vue(或者其他的组件)中,created钩子函数中的代码如下:

created(){
    // console.log(this.$store.state.count)
    this.loadData()
  },
  methods: {
    async loadData(){
      // 1. 发请求拿数据
      const res = await axios.get('http://www.liulongbin.top:3009/api/getbooks')
      console.log(res.data.data)
      // 2. 把数据保存到vuex(state)

      this.$store.commit('initBooks', res.data.data)

    }
  },
复制代码

src/store/index.js中,补充对应的数据项 books和操作的方法。

state: {
  // 省略其他...
  books: [] // 用来保存书
},
mutations: {
  // 省略其他...
  
  // 用来设置数据
  initBooks(state, books) {
     state.books = books
  }
}
复制代码

app.vue模板中 渲染数据

<div style="flex: 1 1 auto; border:1px solid #ccc;">
        书目
        <p v-for="(book, idx) in $store.state.books" :key="idx">
          {{book.name}}, {{book.price}}
        </p>
  		  总价为:XX元
      </div>
复制代码

小结

Vuex-用getters的派生状态

目标

了解getters的作用; 掌握它的用法;

作用

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

例如:计算总价

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

Vuex-state-mutation-getters 小结

vuex维护公共数据,主要有两个动作:

  1. 定义数据:
  2. 提供获取/修改数据的方法

Vuex-actions-发异步请求

导入

上面获取图书信息的方式是:

  1. 组件内部发ajax
  2. ajax回来之后,去调用mutations来保存到vuex中

这种方式有一个问题:代码不好重用

actions介绍

  • actions是vuex的一个配置项
  • 作用:发异步请求获取数据,调用mutations来保存数据,将整个ajax操作封装到Vuex的内部
  • 要点:
    • action 内部可以发异步请求操作
    • action是间接修改state的:是通过调用 mutation来修改state

格式

定义格式

\

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

\

调用格式

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

示例

修改上面例子中的发请求图书的代码,将axios的部分写到action中

// 发ajax请求,从后端获取数据,再来去修改state中的数据
    actions: {
      getBooks (context) {
        // 1. 发异步请求
        axios({
          url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books',
          method: 'GET'
        }).then(res => {
          console.log(res)
          // 2. 调用mutation
          context.commit('setBooks', res.data.data)
        })
      }
    },
复制代码

小结

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

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

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

草图

Vuex-用modules来拆分复杂业务

问题导入

随着项目越来越大,需要放在vuex中的数据越来越多,整个store/index.js中代码会越来越长,怎么办呢?

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 /
|------- index.js # 引入模块
|------- modules
|-------------- / mod1.js # 模块1
|-------------- / mod2.js # 模块2
复制代码

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

  • 访问模块中的数据,要加上模块名
获取数据项:  {{$store.state.模块名.数据项名}}
获取getters: {{$store.getters['模块名/getters名']}}
复制代码
  • 访问模块中的mutations/actions:
    • 如果namespaced为true,则需要额外去补充模块名
    • 如果namespaced为false,则不需要额外补充模块名
$store.commit('mutations名')        // namespaced为false
$store.commit('模块名/mutations名')  // namespaced为true

$store.dispatch('actions名')        // namespaced为false
$store.dispatch('模块名/actions名')  // namespaced为true
复制代码

小结

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

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

vuex-用modules之后代码结构优化

草图

Vuex-辅助函数mapState来使用公共数据

目标

掌握mapState的用法,将state中的变量映射到当前的组件中使用;

问题

当访问某个数据项嵌套太深了,能不能优化一下访问的方式?

用mapState把公共数据(vuex.store) 映射 到本组件内部的计算属性

mapState的使用步骤

映射

// 1. 导入辅助函数mapState,它是在vuex中定义的一个工具函数。
//  es6 按需导入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'

computed: {
   // 说明1: ...对象 是把对象展开,合并到computed
   // 说明2: mapState是一个函数 
   //  ['数据项1', '数据项2']
   ...mapState(['xxx']),
   ...mapState({'新名字': 'xxx'})
}
复制代码

使用

this.xxx
{{xxx}}
复制代码

示例

// 步骤
// 1. 导入辅助函数mapState,它是在vuex中定义的一个工具函数。
//  es6 按需导入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'

// 2. 在computed中使用 ...mapState(['books'])
// const res = mapState(['books'])
// res的结果是一个对象: { books: function() {}}
// console.log('mapState', res)

export default {
  computed: {
    c1 () {
      return 'c1'
    },
    // books: function() {}
    // ..res: 把res这个对象合并到computed对象中
    // ...res
    ...mapState(['books'])
  }
}
</script>
复制代码

小结

  1. mapState是辅助函数,将vuex中的数据投射到组件内部;
  2. computed:{ ...mapState() } 这里的...是对象的展开运算符,整体来看是对象的合并。

Vuex-辅助函数mapState对数据重命名

目标

掌握mapState对数据重命名的用法。

场景

vuex中的数据与本组件内的数据名相同

格式

...mapState({'新名字': 'xxx'})
复制代码

Vuex-map函数用法汇总

如何使用全局state

  • 直接使用: this.$store.state.xxx;
  • map辅助函数:
computed: { 
  ...mapState(['xxx']), 
  ...mapState({'新名字': 'xxx'})
}
复制代码

如何使用modules中的state

  • 直接使用: this.$store.state.模块名.xxx;
  • map辅助函数:
computed: { 
  ...mapState('模块名', ['xxx']), 
  ...mapState('模块名', {'新名字': 'xxx'})
}
复制代码

如何使用全局getters

  • 直接使用:this.$store.getters.xxx
  • map辅助函数:
computed: { 
  ...mapGetters(['xxx']), 
  ...mapGetters({'新名字': 'xxx'})
}
复制代码

如何使用modules中的getters

  • 直接使用: this.$store.getters.模块名.xxx
  • map辅助函数:
computed: { 
  ...mapGetters('模块名', ['xxx']), 
  ...mapGetters('模块名',{'新名字': 'xxx'})
}
复制代码

如何使用全局mutations

  • 直接使用:this.$store.commit('mutation名', 参数)
  • map辅助函数:
methods: { 
  ...mapMutations(['mutation名']), 
  ...mapMutations({'新名字': 'mutation名'})
}
复制代码

如何使用modules中的mutations(namespaced:true)

  • 直接使用: this.$store.commit('模块名/mutation名', 参数)
  • map辅助函数:
methods: { 
  ...mapMutations('模块名', ['xxx']), 
  ...mapMutations('模块名',{'新名字': 'xxx'})
}
复制代码

如何使用全局actions

  • 直接使用:this.$store.dispatch('action名', 参数)
  • map辅助函数:
methods: { 
  ...mapActions(['actions名']), 
  ...mapActions({'新名字': 'actions名'})
}
复制代码

如何使用modules中的actions(namespaced:true)

  • 直接使用: this.$store.dispatch('模块名/action名', 参数)
  • map辅助函数:
methods: { 
  ...mapActions('模块名', ['xxx']), 
  ...mapActions('模块名',{'新名字': 'xxx'})
}
复制代码

小结

图1: actions和mutations和state的关系图

image.png

图2:核心API小结

改写todos

  1. 安装vuex,配置store
  2. 把TodoMain组件中的数据,从vuex从读出。
  3. 添加
  4. 删除
    1.准备mutations,通过下标来删除(数组.splice(下标,1))
    2.调用mutations
  5. 统计数量
    1.准备getters
  6. 筛选

7.清除已完成

8切换全选中/全不选中

9.本地存储

watch: { //监听list改变时把数据存储在本地上
    // 'list'
    // this.数据
    // this.计算属性
    // this.$route // this.$route.qeury.xxx

    '$store.state.list': {
      deep:true,
      handler(newVal){
        localStorage.setItem('tododd',JSON.stringify(newVal))
      }
    }
  }
复制代码

www.fastmock.site/mock/37d3b9…

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