目录
第六章
一、Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex是一个状态管理模式，状态机，将组件共享的数据放到状态机中统一管理，组件想拿数据可以从自己的数据模型中拿，也可以从仓库中拿，把vuex理解成一个仓库.
假设A组件想要那B组件里面的数据
把A组件和B组件的数据放到Vuex中 A组件想要获取B组件数据从vuex中拿 B组件想要获取A组件的数据从Vuex拿
(1)State
在`State`中存放状态，可将状态理解为组件中的`data`，只不过在`state`中一般存放的是组件共享的数据，而在组件内的`data`中一般存放组件的私有数据。
单一状态树:
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。
存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，例如状态对象必须是纯粹 (plain) 的。
在 Vue 组件中获得 Vuex 状态:
那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
// 创建一个 Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。
Vuex 通过 Vue 的插件系统将 store 实例从根组件中“注入”到所有的子组件里。且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现：
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}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'
])对象展开运算符:
mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符，我们可以极大地简化写法：
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}组件仍然保有局部状态
使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
(2)Getters
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。
注意
从 Vue 3.0 开始，getter 的结果不再像计算属性一样会被缓存起来。这是一个已知的问题，将会在 3.1 版本中修复。详情请看 PR #1878。
Getter 接受 state 作为其第一个参数：
const store = createStore({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos (state) {
return state.todos.filter(todo => todo.done)
}
}
})
通过属性访问
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getter 也可以接受其他 getter 作为第二个参数：
getters: {
// ...
doneTodosCount (state, getters) {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
我们可以很容易地在任何组件中使用它：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。
通过方法访问
你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
如果你想将一个 getter 属性另取一个名字，使用对象形式：
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})(3)状态机:
{
//状态存储的位置
state:{
msg:'hello'
}，
getters:{
//获取 可以获取到state中的数据进行处理再输出--派生自state
msgUpper(state){
msgUpper(state){
return state.msg.UpperCase()
}
}
},
//突变 同步操作 唯一修改state数据的一种方式--就是用来修改state数据的
mutations:{
// 默认传递state，类似于事件event payload载荷 形参
changeMsg(state,payload){
state.msg=payload
}
}
//动作 可以放异步
actions:{
//sto是一个类似仓库对象的对象 payload传递的参数
getAll(sto,payload){
假设通过异步请求之后向后台获取到了res,要设置到state中,修改state只能通过mutations提交突变
let res=[];
//提交突变
//第一个参数是触发突变的事件名称 第二个参数是获取到的后台数据
sto.commit('changMsg',res);
//分发动作
//第一个参数是分发动作的事件名称，第二个参数是要传递的数据
sto.dispatch('getAll',[])
}
}
}//1.声明一个仓库配置对象--普通的对象 帮仓库做配置的对象
let storeConf={
state:{},
getters:{},
mutations:{},
actions:{}
}
//2.通过Vuex的构造函数Store生成一个仓库
let store=new Vuex.Store(storeConf);
//3.注册到Vue实例中--将状态机和vue实例进行绑定
new Vue({
store
})### js代码
<script>
// 仓库配置对象
let storeConf={
state:{
storeMsg:'仓库里的msg数据'
},
getters:{
storeMsgUpper(state){ //第一个参数是默认参数
return state.storeMsg.toUpperCase()
}
},
mutations:{
// 突变 修改state中的数据 payload提交突变时候传递的数据 第一个参数是默认参数
changeMsg(state,payload){
state.storeMsg=payload
}
},
actions:{
// 分发动作 sto类似于仓库对象的对象 第一个参数是默认参数
getMsg( {commit,dispatch,mutations,actions},payload){
// console.log(sto,payload)
commit('changeMsg',payload)
}
}
}
//2.生成一个仓库
let store=new Vuex.Store(storeConf)
new Vue({
el:"#app",
// 注册仓库
store,
data:{
msg:'我是父组件'
},
created(){
console.log(this.$store.state)
console.log(this.$store.getters)
// console.log(this.$store.mutations)
// console.log(this.$store.actions)
}
})
</script>
### html代码
<div id="app">
{{msg}}
<br>
{{$store.state.storeMsg}}--------
{{$store.getters.storeMsgUpper}}
<button @click='$store.commit("changeMsg","test")'>提交突变</button>
<button @click='$store.dispatch("getMsg","terry")'>分发动作</button>
</div>3.1组件绑定的辅助函数
Vuex提供的组件辅助函数
mapState()
为组件创建计算属性以 为组件创建计算属性以返回 Vuex store 中的状态。 第一个参数是可选的，可以是一个命名空间字符串。
mapGetters()
为组件创建计算属性以返回 getter 的返回值 第一个参数是可选的，可以是一个命名空间字符串。
mapActions()
创建组件方法分发 action。 返回的结果是一个对象
mapMutations()
创建组件方法提交 mutation 返回的结果是一个对象
computed:{
// ...Vuex.mapState(['storeMsg']),
// ...Vuex.mapGetters(['storeMsgUpper']),
...mapState(['storeMsg']),
...mapGetters(['storeMsgUpper']),
},
methods:{
// ...Vuex.mapActions(['getMsg']),
// ...Vuex.mapMutations(['changeMsg'])
...mapActions(['getMsg']),
...mapMutations(['changeMsg'])
}3.2Module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。namespaced表示设置命名空间
仓库里有多个个配置对象
let aModule={
namespace:true,
state:{}
}
let bMosule={
namespace:true,
state:{}
}
let store=new Vuex({
modules:{
a:aModule,
b:bModules
}
})
this.$store.state.a
this.$store.state.b
...Vuex.mapState('a',[;msg])
...Vuex.mapState('b',[;msg])
//如果是变量命名冲突
mapState('a',{
aMsg:'msg'
})
this.msg->b.msg
this.aMsg==>a.msg
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
