day6 vuex

vuex"/>

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 参数⼆：其他 getterchangeArr(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.$storemit('increment', {count: 10})
// 2、对象⻛格的提交⽅式
this.$storemit({type: 'increment',count: 10
})

3.5. 在组件中提交 Mutation 你可以在组件中使⽤ this.$storemit('xxx') 提交 mutation，或者使⽤ mapMutations 辅助函数将组件中的 methods 映射为 storemit 调⽤（需要 在根节点注⼊ store ）。

import { mapMutations } from 'vuex'
methods:{...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$storemit('inc
rement', {count: 10})`]),...mapMutations({add: 'increment' // 将 `this.add()` 映射为 `this.$storemit('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(() => {contextmit('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：truegetters: {},mutations: {changeNum(state, payload) {state.num = payload.num}},actions: {}
}
export default app

4. 调⽤module

// 使⽤命名空间
this.$storemit("app/changeNum", {num: 10})
// 未使⽤
this.$storemit("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 实例