vuex是什么?
vuex简单来说就是vue官方提供的一个独立于组件体系之外,管理公共数据的一个工具,采用集中式存储管理应用的所有组件的状态,解决多个组件之间的通信
要点:
- vue官方搭配,专属使用 (类似于:vue-router),有专门的调试工具
- 集中式管理数据状态方案 (操作更简洁)
data() { return { 数据, 状态 }}
- 数据变化是可预测的 (响应式)
重点:
vuex是vue官方提供的独立于组件体系之外的,管理公共数据的工具
使用场景:
大型项目,需要用到复杂的组件之间的传值
vuex 中 state与actions和mutations的关系图
vuex在项目中的使用情况
- 在旧项目中,
先额外配置安装vue包,然后再配置
npm i vuex
配置:
- 在src根目录创建一个store的文件夹
在store/index.js 中放置具体的代码,具体如下:
向Vue实例注入store
在src/main.js中:
- 导入store
- 并注入Vue实例
// 省略其他
// 1. 导入store
import store from './store'
new Vue({
// 省略其他...
store // 2. 注入Vue实例
})
2.在新项目中使用,自定义配置项,在配置vue-cli中创建项目时,就可以直接选中vuex项,这样就不用做任何配置了(脚手架会自动帮我们完成的)。具体如下图示:
在组件中使用store
在任意组件中,通过this.$store.state
来获取公共数据
Vuex的学习内容
Vuex中有5个内容需要学习:
- state: 统一定义公共数据(类似于data(){return {a:1, b:2,xxxxxx}})
- mutations : 使用它来修改数据(类似于methods)
- getters: 类似于computed(计算属性,对现有的状态进行计算得到新的数据-------派生 )
- actions: 发起异步请求
- modules: 模块拆分
其中最为重要的内容是state和mutations
state----保存公共数据
state的作用
vuex用它来保存公共的数据
- 如何全局使用state
格式:
new Vuex.store({ state: { 属性名: 属性值 } })
使用公共数据
格式:
在组件中,通过this.$store.state.属性名
来访问。
在模板中,则可以省略this
而直接写成: {{$store.state.属性名}}
代码示例:
可以是对象,可以是数组
小结
state的作用是:保存公共数据(多组件中共用的数据)
state是响应式的: 如果修改了数据,相应的在视图上的值也会变化。
mutations----修改公共数据
作用:
通过调用mutations来修改定义在state中的公共数据
定义格式: 如下
new Vue.store({
// 省略其他...
mutations:{
// 每一项都是一个函数,可以声明两个形参
mutation名1:function(state [, 载荷]) {
},
mutation名2:function(state [, 载荷]) {
},
}
})
每一项都是一个函数,可以声明两个形参:
- 第一个参数是必须的,表示当前的state,在使用时不需要传入
- 第二个参数是可选的,表示payload载荷,它可以是任何形式的类型的值
使用格式
this.$store.commit('mutation名', 实参,给第二个参数)
这里的commit是固定的方法
示例:
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
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来保存数据
将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!