day6 vuex

一、

1、什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. 什么是“状态管理模式”？

状态自管理应用包含以下几个部分：

状态，驱动应用的数据源；

视图，以声明方式将状态映射到视图；

操作，响应在视图上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意

Actions-->State-->View-->Actions......

3、为什么要用vuex？

进行统一的状态管理，解决不同组件共享数据的问题。

不同视图需要变更同一状态的问题。

使用vuex之后，状态变化更加清晰

二、核心概念

1.1、state

state是什么？

是一个单一状态树，是vuex中为一个的数据源，我们的数据都是放在state中的。

state: {   
     count: 1  
 },

1.2.组件中去取state的值，通过this.$store.state

1.3.或者可以通过计算属性取得,mapState辅助函数，可以简化操作

import {mapState} from "vuex";
computed: {  
    ...mapState({      
        // 传字符串参数 'count' 等同于 `state => state.count`   
        count: 'count',         
        // 箭头函数可使代码更简练      
        count: state => state.count,    
      })
}，

2.1. getters

对state中的数据进行加工（派生），类似vue中的computed，进行缓存，形成新的数据

state: {
 arr: [1, 2, 3, 4]
 },
 getters: {
 // 参数⼀：state 参数⼆：其他 getter
 changeArr(state,getters) {
 return state.arr.map(item => item + 1)
 }
 },
 
注意，getter 在通过属性访问时是作为 Vue 的响应式系统的⼀部分缓存其中的。

2.2  取getters中的值,通过this.$store.getters，

2.3. 或者通过计算属性取，getters也有辅助函数 mapGetters， ⽤法和mapState⼀

致。

import {mapGetters} from 'vuex'
// 1、
...mapGetters([
 'changeCount',
 // ...
])
// 2、
...mapGetters({
 changeCount: 'changeCount'
 // ...
})

.3. mutation

3.1. 更改 Vuex 的 store 中的状态的唯⼀⽅法是提交 mutation ，⽅便追踪数据的流

转

3.2. mutation函数必须是同步的

3.3. 定义mutation

state: {
 count: 1,
},
mutations: {
 // 参数⼀：state 参数⼆：传⼊额外的参数
 increment(state, payload) {
 state.count = payload.count
 },
},

3.4. 调⽤mutation

// 1、普通⽅式
this.$store.commit('increment', {count: 10})
// 2、对象⻛格的提交⽅式
this.$store.commit({
 type: 'increment',
 count: 10
})

3.5. 在组件中提交 Mutation

你可以在组件中使⽤ this.$store.commit('xxx') 提交 mutation，或者使⽤

mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调⽤（需要

在根节点注⼊ store ）。

import { mapMutations } from 'vuex'
methods:{
 ...mapMutations([
 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('inc
rement', {count: 10})`
 ]),
 ...mapMutations({
 add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('inc
rement')`
 }),
},
this.increment({count: 10})
this.add({count: 10})

4. Action

1. action类似于mutation，不同的是action可以包含异步操作

2. action不能直接修改state，如果想修改state的话，需要触发mutation

3. 定义action

state: {
 count: 0
 },
 mutations: {
 increment (state,payload) {
 state.count = payload.count
 }
 },
 actions: {
 // 第⼀个参数通过context（上下⽂环境）可以触发mutation，触发action，获取stat
e、getter等操作
 // 第⼆个参数就是我们传递过来的参数
 incrementAsync(context, payload) {
 setTimeout(() => {
 context.commit('increment', payload)
 }, 1000);
 }
 }

4. 调⽤action

// 1、普通⽅式
this.$store.dispatch('incrementAsync', {count: 10})
// 以对象形式分发
this.$store.dispatch({
 type: 'incrementAsync',
 count: 10
})

5. 在组件中提交 action

你在组件中使⽤ this.$store.dispatch('xxx') 分发 action，或者使⽤

mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调⽤（需要先在

根节点注⼊ store ）：

import { mapActions } from 'vuex'
methods: {
 ...mapActions([
 'incrementAsync', // 将 `this.increment()` 映射为 `this.$store.di
spatch('increment', {count: 10})`
 ]),
 ...mapActions({
 add: 'incrementAsync' // 将 `this.add()` 映射为 `this.$store.disp
atch('increment')`
 }),
},
this.incrementAsync({count: 10})
this.add({count: 10})

.5 module

1. 由于使⽤单⼀的状态树，项⽬中的状态会集中在⼀起，导致难以维护，这个时

候可以通过module对store进⾏拆分。

2. 使⽤module之后，每个模块都有⾃⼰的state、mutation等内容，⽅便维护。

3. 定义module

// index.js中⼿动引⼊modules
import app from './modules/app'
modules: {
 app
}
<!-- app.js -->
 const app = {
 state: {
 num: 10
 },
 // 默认state就是有命名空间，
 // 如果想给mutation和action也加上命名空间的话，这⾥设置模块的namespaced：true
 getters: {},
 mutations: {
 changeNum(state, payload) {
 state.num = payload.num
 }
 },
 actions: {}
}
export default app

4. 调⽤module

// 使⽤命名空间
this.$store.commit("app/changeNum", {num: 10})
// 未使⽤
this.$store.commit("changeNum", {num: 10})

6. vuex持久化存储

在开发的过程中， vuex数据刷新⻚⾯会初始化。像⽤户信息（名字，头像，

token）需要vuex中存储且需要浏览器本地存储来实现持久化存储。

混⼊

.1. 什么是混⼊

混⼊ (mixin) 提供了⼀种⾮常灵活的⽅式，来分发 Vue 组件中的可复⽤功能。

⼀个混⼊对象可以包含任意组件选项。当组件使⽤混⼊对象时，所有混⼊对象的选

项将被“混合”进⼊该组件本身的选项

var myMixin = {
 data() {
 return {
 msg: 'mixins'
 }
 },
 created: function () {
 this.hello()
 },
 methods: {
 hello: function () {
 console.log('hello from mixin!')
 }
 }
}
export default myMixin
// 组件：
import myMixin from "@/mixins/mixins";
export default {
 name: 'HomeView',
 mixins: [myMixin],
 created() {
 console.log(this.msg) // mixins
 }
}

.2. 选项合并

当组件和混⼊对象含有同名选项时，这些选项将以恰当的⽅式进⾏“合并”。

⽐如，数据对象在内部会进⾏递归合并，并在发⽣冲突时以组件数据优先。

// 混⼊
var myMixin = {
 data() {
 return {
 msg: 'mixins'
 }
 },
 created: function () {
 this.hello()
 },
 methods: {
 hello: function () {
 console.log('hello from mixin!')
 }
 }
}
export default myMixin
// 组件
import myMixin from "@/mixins/mixins";
export default {
 name: 'HomeView',
 mixins: [myMixin],
 data() {
 return {
 msg: 'homeView'
 }
 },
 created() {
 console.log(this.msg) // homeView
 }
}

值为对象的选项，例如 methods、components 和 directives，将被合并为同

⼀个对象。两个对象键名冲突时，取组件对象的键值对。

.3. 全局混⼊

混⼊也可以进⾏全局注册。使⽤时格外⼩⼼！⼀旦使⽤全局混⼊，它将影响每

⼀个之后创建的 Vue 实例