持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
Vuex中有5个核心概念需要学习：
- state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
- mutations ： 使用它来修改数据(类似于methods)
- getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
- actions： 发起异步请求
- modules： 模块拆分
1. Vuex-state定义公共数据并在组件中使用
1.1 作用
vuex用它来保存公共数据
1.2 定义公共数据
格式
new Vuex.store({
state() {
return {
属性名： 属性值
}
}
})
示例
new Vuex.store({
state(){
return {
userInfo: {
name: 'aha',
skills: ['唱', '跳', 'rap'],
address: '汤臣一品',
}
}
}
})
1.3 使用公共数据
格式：
在组件中，通过this.$store.state.属性名来访问。
在模板中，则可以省略this而直接写成： {{$store.state.属性名}}
1.4 小结
state的作用是：保存公共数据（多组件中共用的数据）
state是响应式的： 如果修改了数据，相应的在视图上的值也会变化。
2. Vuex-用mutations修改公共数据
2.1 作用
通过调用mutations来修改定义在state中的公共数据。
2.2 格式
分两个格式： 定义格式，调用格式
定义格式： 如下
new Vue.store({
mutations：{
// 每一项都是一个函数，可以声明两个形参
mutation名1：function(state [, 载荷]) {
},
mutation名2：function(state [, 载荷]) {
}
}
})
每一项都是一个函数，可以声明两个形参：
- 第一个参数是必须的，表示当前的state。在使用时不需要传入
- 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据
使用格式
this.$store.commit('mutation名', 实参)
这里的commit是固定的方法
2.3 示例
在store/index.js中，补充：
- 数据项
- 更新数据项url的mutations
export default new Vuex.Store({
// state: 用来保存所有的公共数据
new Vuex.store({
state(){
return {
userInfo: {
name: 'aha',
skills: ['唱', '跳', 'rap'],
address: '汤臣一品',
}
}
}
})
// mutations: 用它提供修改数据的方法
// 数据不应该在组件内部直接修改，必须在组件内调用mutations来修改
mutations: {
changeName(state, newName) {
state.userInfo.name = newName
}
}
}
在组件中，调用
const name = 'haha'
this.$store.commit('changeName', name)
2.4 小结
mutations的中文含义是：变异。 它是Vuex中用来修改公共数据的唯一入口。
在定义时：它的第一个参数是state，第二个参数是载荷
在调用时：用 this.$store.commit('mutation名'， 载荷) 来调用
2.5 mutations 补充
问：数据不可以该在组件内部直接修改吗？
答：不能。虽然语法上不报错，也有响应式的特点。但是不推荐。特别是在严格模式下会报错。若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作，只要不经过 mutation的函数，vue就会报错
3. Vuex-用getters的派生状态
3.1 作用
在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)
3.2 格式
定义格式
new Vuex.store({
// 省略其他...
getters: {
// state 就是上边定义的公共数据state
getter的名字1: function(state) {
return 要返回的值
}
}
})
state 就是上边定义的公共数据state
** 使用格式**
在组件中通过：$store.getters.getter的名字 来访问
3.3 小结
它的作用是从已有公共数据项中派生出新的数据项，类似于computed
4. Vuex-actions-发异步请求
4.1 作用
发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部
- action 内部可以发异步请求操作
- action是间接修改state的：是通过调用 mutation来修改state
4.2 格式
定义格式
new Vuex.store({
// 省略其他...
actions: {
// context对象会自动传入，它与store实例具有相同的方法和属性
action的名字: function(context, 载荷) {
// 1. 发异步请求, 请求数据
// 2. commit调用mutation来修改数据
// context.commit('mutation名', 载荷)
}
}
})
调用格式
在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action
4.3 小结
action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据
5. Vuex-用modules来拆分复杂业务
5.1 modules的作用
拆分模块，把复杂的场景按模块来拆开
5.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
5.3 小结
使用了modules之后，在访问数据时就要额外添加modules的名字了。
结论： 在使用modules时，建议都给加上namespaced!
