Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。
vue官方提供的独立于组件体系之外的，管理公共数据的工具
手动安装 小黑窗输入命令npm i 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
在src/main.js中
导入store 并注入Vue实例
// 省略其他
// 1. 导入store
import store from './store'
new Vue({
// 省略其他...
store // 2. 注入Vue实例
})
在任意组件中，通过this.$store.state 来获取公共数据。
Vuex-用mutations修改公共数据
通过调用mutations来修改定义在state中的公共数据。
格式
new Vue.store({
// 省略其他...
mutations：{
// 每一项都是一个函数，可以声明两个形参
mutation名1：function(state [, 载荷]) {
},
mutation名2：function(state [, 载荷]) {
}
}
})
每一项都是一个函数，可以声明两个形参：
- 第一个参数是必须的，表示当前的state。在使用时不需要传入
- 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据 使用格式
this.$store.commit('mutation名', 实参)
vuex-getter
在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)
格式
new Vuex.store({
// 省略其他...
getters: {
// state 就是上边定义的公共数据state
getter的名字1: function(state) {
return 要返回的值
}
}
})
使用格式:
在组件中通过：$store.getters.getter的名字 来访问
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
实列发ajax
// 发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中有两个好处：
- 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。
- 逻辑更通顺。如果数据需要保存在Vuex的state中，那从接口处获取数据的操作就定义在Vuex的actions中。
Vuex-用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
