Vuex 学习笔记
1.Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
- 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
2.如何使用Vuex
2.1 首先需要安装Vuex
如果使用的是Vue-CLI,那么在创建一个项目选取安装工具包的时候要选中Vuex进行统一创建
如果使用的是普通的开发模式,则需要使用npm或者其他安装工具进行单独安装
Vue-Cli 安装的Vuex是有默认代码的
单独安装的则需要创建一个文件来引入Vuex
// 首先在此文件中 引入Vue
import Vue from 'vue'
// 再将 Vuex 引入
import Vuex from 'Vuex'
// 在Vue中注册Vuex
Vue.use(Vuex)
// 将 一个实例化store 进行抛出出
export default new Vuex.Store({
state: {},
getters:{},
mutations:{},
A
})
// 最后在vue实例中 注册 Store
3. 核心概念
3.1 State
用来存储多个组件中都用的属性或者说是变量
App.vue 文件:
<template>
<div id="App">
<-- 在此处展示Vuex的index.js文件中的count变量 -->
<p>{{$store.state.count}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {}
}
}
</script>
Vuex 文件 文件名为 index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 10
}
})
以上方法可以展示index.js 的 state 中的 属性值
当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。
我们会用一个辅助函数来代替 mapState
使用辅助函数来 简化以上代码
index.js文件的代码不变,此方法需定义在 组件的 computed 计算属性当中
App.vue 文件:
<template>
<div id="App">
<-- 在此处展示Vuex的index.js文件中的count变量 -->
<p>{{$store.state.count}}</p>
</div>
</template>
<script>
// 首先引入这个方法
import {mapState} from 'vuex'
export default {
name: 'App',
data () {
return {}
},
computed:{
...mapState(['count'])
// 此函数的返回结果是一个对象,所以要使用 ... 展开运算符 将他们展开放在computed 属性中
}
}
</script>
3.2Getters
这个和Vue计算属性相像,可以认为是 store 的计算属性,它定义在 Store的实例对象中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 10,
songList: [
{ id: 1, name: '龙卷风', auther: '邓紫棋' },
{ id: 2, name: '双节棍', auther: '周杰伦' },
{ id: 3, name: '勿忘', auther: '李代沫' }
]
},
getters: {
counts: state => state.songList.length
}
})
在组件中如何使用它
<template>
<div id="App">
<p>总共有{{ $store.getters.counts }}首歌曲</p>
</div>
</template>
他也有一个辅助函数mapGetter
在vue组建中使用它这个辅助函数
<template>
<div id="App">
<p>总共有{{ counts }}首歌曲</p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'App',
data () {
return {
}
},
computed: {
...mapGetters(['counts'])
}
}
</script>
<style>
</style>
3.3 Mutations
这个属性和Methods相似,是用来定义方法的
Mutations 中必须是同步函数
在想要操作store中state中的属性时不可以直接修改该属性,需要通过mutation进行修改
演示:
<template>
<div id="App">
<p>{{ count }}</p>
<button @click="add">自增</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name:"App",
data(){
return {}
},
methods:{
add(){
// 需要使用commit 函数来调用 mutations中的函数来改变count值
this.$store.commit('addcount')
}
},
computed: {
...mapState(['count'])
}
}
</script>
index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
addcount(state){
state.count++
}
}
})
每次调用mutations中的方法使用commit会很不方便,它和上面的其他属性一样,也有一个辅助函数
mapMutation
想要调用mutations中的方法来修改state中的属性,相对简单多了
<template>
<div id="App">
<p>{{ count }}</p>
<button @click="add">自增</button>
</div>
</template>
<script>
import { mapState,mapmutations } from 'vuex'
export default {
name:"App",
data(){
return {}
},
methods:{
...mapmutations(['addcount']) //其实就是相当于将这个方法引入,在methods中可以通过this来调用该方法
add(){
this.addcount()
}
},
computed: {
...mapState(['count'])
}
}
</script>
3.4 Action
Action 类似于 mutation,不同在于:
- Action 不能直接变更状态(state的属性),必须使用commit提交到mutation中的方法进行修改。
- Action 可以包含任意异步操作。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
3.5 Module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割