关于Vuex的学习
1.什么是vuex?
官方文档讲:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能
人话讲:vuex:负责管全局数据处理状态
核心:store
>1.Store
store的特点:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
Vuex的存储也是响应式的,也就是说Vue的组件从store中检索状态时候,如果store发生变化,那么组件也会发生变化。
不能直接改变store中的状态,改变store的唯一途径就是显示地提交mutation
store.commit('increment')
console.log(store.state.count) // -> 1
现在,可以通过 store.state
来获取状态对象,并通过 store.commit
方法触发状态变更(相当于store就是一个大容器,包含5个核心概念)
methods: {
increment() {
this.$store.commit('increment')
console.log(this.$store.state.count)
}
}
在 Vue 组件中, 可以通过 this.$store
访问store实例。现在我们可以从组件的方法提交一个变更:
2.核心五大部分
1.State
- state:类似与data的作用,储存数据
-
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ //数据,相当于data state: { name:"张三", age:12, count:0 }, })
如何获取数据?
-
可以在标签中直接使用
<p>{{$store.state.name}}</p> //张三 <p>{{$store.state.age}}</p> //12
或者通过 this.$store.state.全局数据名称调用
mapState辅助函数
官方定义:当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState
辅助函数帮助我们生成计算属性,让你少按几次键:
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState
传一个字符串数组。
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
通过对象展开运算符,简化写法
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}