gitsilence 的个人博客
Coding...
目录
Vuex的学习
Vuex的学习
Vuex的学习。
Vuex是一个专为Vue.js应用程序开发的状态管理模式
它采用采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
状态管理到底是什么 ？
- 状态管理模式、集中式存储管理
其实就是将其看成把需要多个组件共享的变量全部存储在一个对象里面
将这个对象放在顶层的Vue实例中，让其他组件可以使用
单页面的状态管理
State：状态（可以看作data中的属性）
View：视图层，可以针对State的变化，显示不同的信息
Actions：主要是用户的各种操作：点击、输入等，会导致状态的改变
异步请求一般在actions中操作，mustations中一般只进行同步的操作，异步的操作devtools捕获不到。
使用步骤
- 提取一个公共的store对象，用于保存在多个组件中共享的状态
- 将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
- 在其他组件中使用store对象中保存的状态即可
- 通过this.$store.state属性的方式来访问状态
- 通过this.$store.commit('mutation中方法')来修改状态
注意事项：
- 我们通过提交mutation的方式，而非直接改变store.state.count
- vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值
getters基本使用
类似于计算属性 computed
Mutation状态更新
Vuex的store状态的更新唯一方式：提交Mutation
Mutation主要包括两部分：
- 字符串的事件类型
- 一个回调函数（handler），该回调函数的第一个参数就是state
Mutation传递参数
参数被称为是mutation的载荷（Payload）
HelloWorld.vue
<template>
<div class="hello">
<h2>{{$store.state.counter}}</h2>
<button @click="subs">-1</button>
<button @click="add">+1</button>
<button @click="addCount(5)">+5</button>
<button @click="addCount(10)">+10</button>
<h2>平方为：{{$store.getters.getTest}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods: {
add () {
this.$store.commit('increment')
},
subs () {
this.$store.commit('sub')
},
addCount (count) {
this.$store.commit('addCount', count)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
store/index.js
mutations: {
increment(state) {
state.counter++
},
sub(state) {
state.counter--
},
addCount(state, count) {
state.counter += count
}
}
当传入多个参数时，可以使用对象的形式。。
Mutation的提交风格
上面的通过commit进行提交是一种普通的方式
Vue还提供了另外一种风格，它是一个type属性的对象
addCount (count) {
// this.$store.commit('addCount', count)
/* 另一种提交的方式 */
this.$store.commit({
type: 'addCount',
count
})
}
/* 接收 */
addCount(state, payload) {
console.log(payload)
state.counter += payload.count
}
Mutation响应规则
Vue的store中的state是响应式的，当state中的数据发生变化时，Vue组件会自动更新
这就需要我们必须遵守一些Vue对应的规则
- 提前在store中初始化好所需的属性
- 当给state中的对象添加新属性时，使用下面的方式：
- 方式一：使用Vue.set(obj, 'newProp', 123)
- 方式二：用新对象给旧对象重新赋值
updateInfo () {
this.$store.commit('updateInfo', '深圳')
}
state: {
counter: 0,
obj: [{
id: 1,
name: 'Helen',
age: 21
}]
},
mutations: {
updateInfo(state, address) {
// 这种数据增加，不是响应式的。
// state.obj['address'] = address
// 这个支持响应式，如果是数组，中间类型为number 增加属性
Vue.set(state.obj[0], 'address', address)
// 删除对象中的属性
Vue.delete(state.obj[0], 'address')
}
}
Mutation的类型常量
将方法的名字 全部设置成常量保存在js文件中。
- 创建mutations-types.js文件
export const INCREMENT = 'increment'
export const SUB = 'sub'
export const ADDCOUNT = 'addCount'
export const UPDATEINFO = 'updateInfo'
- store/index.js中使用方法
import {
INCREMENT,
SUB,
ADDCOUNT,
UPDATEINFO
} from '../store/mutations-types'
mutations: {
[INCREMENT](state) {
state.counter++
},
[SUB](state) {
state.counter--
},
// addCount(state, count) {
// state.counter += count
// }
[ADDCOUNT](state, payload) {
console.log(payload)
state.counter += payload.count
state.obj.push(payload.obj)
},
[UPDATEINFO](state, address) {
// 这种数据增加，不是响应式的。
// state.obj['address'] = address
Vue.set(state.obj[0], 'address', address)
}
},
Mutation同步函数
一般只进行同步操作
Action的基本定义
Action类似于Mutation，但是是用来代替Mutation进行异步操作
setTimeout(() => {}, 1000) 这个函数 是异步操作。
通过dispatch到actions
HelloWorld.vue
updateInfo () {
// 到 mutations中
// this.$store.commit(UPDATEINFO, '深圳')
// 到actions中
this.$store.dispatch('asyncUpdate', '异步操作')
}
store/index.js
actions: {
/*
这里的context是store实例
*/
asyncUpdate(context, content) {
setTimeout(() => {
// 这里提交到mutations中
context.commit(UPDATEINFO, content)
}, 1000)
}
},
认识Module
Module是模块的意思
- Vue使用单一状态树，那么也意味着很多状态都会交给Vuex来管理
- 当应用变得非常复杂时，store对象就有可能变得相当臃肿
- 为了解决这个问题，Vuex允许我们将store分割成成模块，而每个模块拥有自己的state、mutations、actions、getters等。
modules: {
a: {
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
}
}