关于vue.js:Vue-第一章-Vuex

本文基于 Vue2 解说 Vuex
教程视频： 107_尚硅谷Vue技术_Vuex工作原理图_哔哩哔哩_bilibili

1、简介

Vuex 是一种状态管理模式，集中式存储和治理利用的所有组件的状态。
比照 Pinia
- Vuex 应用繁多状态树，每个利用仅蕴含一个store实例；而 pinia 能够存在多个 store实例；
- 严格模式下，Vuex 不能间接扭转 store中的状态，惟一路径是显式地提交mutation；而 pinia 能够间接批改；

2、外围

1）State

Vuex 采纳繁多状态树，这棵状态树就是 state，这也意味着，每个利用将仅仅蕴含一个 store 实例。

（1）获取状态

因为 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简略的办法就是在计算属性中返回某个状态。

// 创立一个 Counter 组件
// 每当 `store.state.count` 变动的时候, 都会从新求取计算属性，并且触发更新相关联的 DOM。
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

（2）mapState 辅助函数

mapState：把state属性映射到computed身上。
当一个组件须要获取多个状态的时候，将这些状态都申明为计算属性会有些反复和冗余，咱们能够应用 mapState 辅助函数帮忙咱们生成计算属性。
```
import { mapState } from 'vuex';
export default{
    computed:{
        ...mapState("loginModule",["userinfo"])
    }
}
```

2）Getter

就像计算属性一样，getter 的返回值会依据它的依赖被缓存起来，且只有当它的依赖值产生了扭转才会被从新计算。

Getter 承受 state 作为其第一个参数，也能够承受其余 getter 作为第二个参数。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
      
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
  }
  }
})

（1）通过属性拜访

Getter 会裸露为 store.getters 对象，你能够以属性的模式拜访这些值。
留神，getter 在通过属性拜访时是作为 Vue 的响应式零碎的一部分缓存其中的。
```
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
```

（2）通过办法拜访

通过让 getter 返回一个函数，来实现给 getter 传参，实质是利用闭包的模式。在你对 store 里的数组进行查问时十分有用。

留神，getter 在通过办法拜访时，每次都会去进行调用，而不会缓存后果。

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

（3）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）Mutation

更改 Vuex 的 store 中的状态的惟一办法是提交 mutation。

（1）事件注册

每个 mutation 都有一个字符串的事件类型和一个 handler 回调函数。这个回调函数就是咱们理论进行状态更改的中央，并且它会承受 state 作为第一个参数。
```
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})
```

（2）事件调用

唤醒一个 mutation handler，你须要以相应的 type 调用 store.commit 办法。
```
store.commit('increment')
```
你能够向 store.commit 传入额定的参数，即 mutation 的 载荷（payload）。

在大多数状况下，载荷应该是一个对象，这样能够蕴含多个字段并且记录的 mutation 会更易读。
```
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})
```

（3）注意事项

store 中的状态是响应式的，当咱们变更状态时，监督状态的 Vue 组件也会自动更新。这意味着 mutation 也须要与应用 Vue 一样恪守一些注意事项：

// 1. 最好提前在 store 中初始化好所有所需属性。
// 2. 在对象上增加新属性时。

Vue.set(obj, 'newProp', 123) // 增加属性
state.obj = {...state.obj , newProp:123 }    // 新对象替换老对象

（4）同步函数

察看 devtool 中的 mutation 日志，为了记录每一条 mutation ，devtools 须要捕捉到 mutation 前一状态和后一状态的快照。
这要求 mutation 必须是同步函数。因为回调函数中进行的状态的扭转都是不可追踪的。

（5）mapMutations辅助函数

应用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也反对载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
      
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    }),
    ...mapMutations('loginModule',['setUser']),    // 模块
  }
}

4）Actions

Action 相似于 mutation，不同在于 Action 提交的是 mutation，而不是间接变更状态，而且 Action 能够蕴含任意异步操作。
Action 函数承受一个与 store 实例具备雷同办法和属性的 context 对象。因而你能够调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
```
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
```

（1）散发 Action

Action 通过 store.dispatch 办法触发：
```
store.dispatch('increment')
```

Actions 反对同样的载荷形式和对象形式进行散发

// 以载荷模式散发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象模式散发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

（2）mapActions 辅助函数

应用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用。

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也反对载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
      
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

5）Module

因为应用繁多状态树，利用的所有状态会集中到一个比拟大的对象。当利用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 容许咱们将 store 宰割成模块（module）。

每个模块领有本人的 state、mutation、action、getter、甚至是嵌套子模块。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

（1）部分状态

对于模块外部的 mutation 和 getter，接管的第一个参数是模块的部分状态对象。

const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的部分状态
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

对于模块外部的 action，部分状态通过 context.state 裸露进去，根节点状态则为 context.rootState：

const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

对于模块外部的 getter，根节点状态会作为第三个参数裸露进去：

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

（2）命名空间

如果心愿你的模块具备更高的封装度和复用性，你能够通过增加 namespaced: true 的形式使其成为带命名空间的模块。

当模块被注册后，它的所有 getter、action 及 mutation 都会主动依据模块注册的门路调整命名。

// loginModule.js
export default {
    namespaced:true,
    state:{
        userinfo:{
            user:'',
            token:''
        }
    },
    mutations:{
        //设置用户信息
        setUser(state,payload){
            state.userinfo = payload;
        },
        //清空
        clearUser(state){
            state.userinfo={
                user:'',
                token:''  
            }
        }
    },
}

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import loginModule from './modules/loginModule'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    loginModule
  }
})

（3）模块动静注册

在 store 创立之后，你能够应用 store.registerModule 办法注册模块。

import Vuex from 'vuex'
const store = new Vuex.Store({ /* 选项 */ })

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})

// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

相干办法：
- 通过 store.state.myModule 和 store.state.nested.myModule 拜访模块的状态。
- 通过 store.unregisterModule(moduleName) 来动静卸载模块。留神，你不能应用此办法卸载动态模块（即创立 store 时申明的模块）。
- 通过 store.hasModule(moduleName) 办法查看该模块是否曾经被注册到 store。

3、进阶

1）严格模式

在严格模式下，无论何时产生了状态变更，只有不是由 mutation 引起的，将会抛出谬误。这能保障所有的状态变更都能被调试工具跟踪到。
严格模式会深度监测状态树来检测不合规的状态变更，==请确保在公布环境下敞开严格模式，以防止性能损失。==
```
const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})
```

2）表单解决

当在严格模式中应用 Vuex 时，在属于 Vuex 的 state 上应用 v-model 会比拟辣手：
```
<input v-model="obj.message">
```
假如这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象，在用户输出时，v-model 会试图间接批改 obj.message。在严格模式中，因为这个批改不是在 mutation 函数中执行的, 这里会抛出一个谬误。

办法是应用带有 setter 的双向绑定计算属性：

mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

// login.vue
<input v-model="message">

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

3）数据长久化

浏览器刷新页面后，Vuex的数据会失落。
起因：store里的数据保留在运行内存中，当页面刷新时，页面从新加载Vue实例，store被从新赋值初始化。

（1）sessionStorage

在页面加载时读取sessionStorage里的状态信息，在页面刷新时将vuex里的信息保留到sessionStorage。

created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    
    //在页面刷新时将vuex里的信息保留到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
}

（2）vuex-along

vuex-along的本质也是localStorage 和 sessionStorage，只不过存储过程由第三方库实现；

配置 vuex-along在 store/index.js 中最初增加以下代码:

import VueXAlong from 'vuex-along' //导入插件
export default new Vuex.Store({
    //modules: {
        //controler  //模块化vuex
    //},
    plugins: [VueXAlong({
        name: 'store',     //寄存在localStroage或者sessionStroage 中的名字
        local: false,      //是否寄存在local中  false 不寄存 如果寄存依照上面session的配置
        session: { list: [], isFilter: true } //如果值不为false 那么能够传递对象 其中 当isFilter设置为true时， list 数组中的值就会被过滤调,这些值不会寄存在seesion或者local中
    })]
});

关于vue.js:Vue-第一章-Vuex

1、简介

2、外围

1）State

（1）获取状态

（2）mapState 辅助函数

2）Getter

（1）通过属性拜访

（2）通过办法拜访

（3）mapGetters 辅助函数

3）Mutation

（1）事件注册

（2）事件调用

（3）注意事项

（4）同步函数

（5）mapMutations辅助函数

4）Actions

（1）散发 Action

（2）mapActions 辅助函数

5）Module

（1）部分状态

（2）命名空间

（3）模块动静注册

3、进阶

1）严格模式

2）表单解决

3）数据长久化

（1）sessionStorage

（2）vuex-along

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于vue.js:Vue-第一章-Vuex

1、简介

2、外围

1）State

（1）获取状态

（2）mapState 辅助函数

2）Getter

（1）通过属性拜访

（2）通过办法拜访

（3）mapGetters 辅助函数

3）Mutation

（1）事件注册

（2）事件调用

（3）注意事项

（4）同步函数

（5）mapMutations辅助函数

4）Actions

（1）散发 Action

（2）mapActions 辅助函数

5）Module

（1）部分状态

（2）命名空间

（3）模块动静注册

3、进阶

1）严格模式

2）表单解决

3）数据长久化

（1）sessionStorage

（2）vuex-along

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复