Vuex中的方法

      1、概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

      2、在storejs中追加getters配置

        const getters = {

            bigSum(state){

              return statesum 10

            }

        }

        //创建并暴露store

        export default new VuexStore({

           

            getters

        })

      3、组件中读取数据：$storegettersbigSum

      1、mapState方法： 用于帮助我们映射state中的数据计算属性

        computed:{

            //借助mapSate生成计算属性 (对象写法)

            mapState({sum:'sum'})

            //数组写法

            mapState(['sum'])

        }

      2、mapGetters方法： 用于帮助我们映射getters中的数据为计算属性

        computed:{

            //借助mapGetters生成计算属性 (对象写法)

            mapGetters({bigSum:'bigSum'})

            //数组写法

            mapGetters(['bigSum'])

        }

      3、mapActions方法： 用于帮助我们生成与actions对话的方法，即：包含$storedispatch(xxx)的函数

        methods:{

            //靠mapActions生成incrementOdd、incrementWait方法（对象形式）

            mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

            //数组写法

            mapActions(['incrementOdd','incrementWait'])

        }

      4、mapMutations方法：用于帮助我们生成与mutation对话的方法，即：包含$storecommit(xxx)函数

        methods:{

            //靠mapActions 生成：increment，decrement（对象形式）

            mapMutations({increment:'JIA'，decrement:'JIAN'})

            //数组写法

            mapMutations(['JIA','JIAN'])

        }

一般在组件内拿到vuex中的数据通常的做法

这种做法在对少量数据进行处理还是比较方便的，但是数据一多的话需要多个computed进行处理，存在大量冗余

当我们利用mapState直接取，在模板里面直接使用时，会在页面上看到如下信息

每一个数据都是一个函数，说明直接取出的数据格式是不对的，在页面上的数据最好是ref对象,

现在需要将原来的数据格式{counter:function} 转换为 { counter : ref }

将上面的步骤封装为自定义hooks

使用

当需要取出Getters里面的数据时可以稍稍修改一下

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护

② 能够高效地实现组件之间的数据共享，提高开发效率

③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。

组件访问 State 中数据的第一种方式：

this$storestate 全局数据名称

组件访问 State 中数据的第二种方式：

Mutation 用于变更 Store中 的数据。

只能通过 mutation 变更 Store 数据，不可以直接 *** 作 Store 中的数据。

通过这种方式虽然 *** 作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

可以在触发 mutations 时传递参数：

this$storecommit() 是触发 mutations 的第一种方式

触发 mutations 的第二种方式：

Action 用于处理异步任务。

如果通过异步 *** 作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发

Mutation 的方式间接变更数据

触发 actions 异步任务时携带参数：

this$storedispatch() 是触发 actions 的第一种方式

触发 actions 的第二种方式：

Getter 用于对 Store 中的数据进行加工处理形成新的数据。

Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。

Store 中数据发生变化，Getter 的数据也会跟着变化。

使用 getters 的第一种方式： this$storegetters名称

使用 getters 的第二种方式：

mutations 是 *** 作 state 数据的方法的集合，比如对该数据的修改、增加、删除等等。

mutations 方法都有默认的形参：

([state] [,payload])

而在组件中，我们需要这样去调用这个mutation——例如在Appvue的某个method中:

在实际生产过程中，会遇到需要在提交某个 mutation 时需要携带一些参数给方法使用。

单个值提交时:

当需要多参提交时，推荐把他们放在一个对象中来提交:

接收挂载的参数：

另一种提交方式

context ：上下文(相当于箭头函数中的this)对象

payload ：挂载参数

组件内调用模块a的状态：

而提交或者dispatch某个方法和以前一样,会自动执行所有模块内的对应type的方法：

模块中 mutations 和 getters 中的方法接受的第一个参数是自身局部模块内部的 state

actions 中方法获取局部模块状态是 contextstate ,根节点状态是 contextrootState

如果把整个 store 都放在 indexjs 中是不合理的，所以需要拆分。比较合适的目录格式如下：

对应的内容存放在对应的文件中，和以前一样，在 indexjs 中存放并导出 store 。 state 中的数据尽量放在 indexjs 中。而 modules 中的 Astore 局部模块状态如果多的话也可以进行细分。

注意点：

1getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

2getter是自带缓存的不用写在computed中

3如果在一个普通方法中返回牵扯到getter的数据跟data中的数据，任何一个数据改变都会引起普通方法之行，

相当于storestatecount+thiscount在computed里面同样的效果，storestatecount与thiscount任何一个变化都会引起computed里面的方法函数执行。

记录语法以下面例子为例：

在vue组件中的调用方法一

在vue组件中的调用方法二

在vue组件中使用mapGetters调用方发三（最常用）

在vue组件中使用mapGetters方法四另外取名

原理：在创建Vue实例时，Vue会遍历data选项的属性，利用ObjectdefineProperty()为属性添加getter和setter对数据的读取进行劫持（getter用来依赖手机，setter用来派发更新），并且在内部追踪依赖，在属性被访问和修改时通知变化。每个组件实例会有相应的watcher实例，会在组件渲染过程中记录依赖的所有数据属性，之后依赖项被改动时，setter方法会通知依赖与此data的watcher实例重新计算（派发更新），从而使它关联的组件重新渲染。

一句话总结：vuejs采用数据劫持结合发布-订阅模式，通过ObjectdefineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发响应的监听回调。

我的理解：在new Vue的时候，在Observer中通过ObjectdefineProperty()达到数据劫持，代理所有数据的getter和setter属性，在每次触发setter的时候，都会通过Dep来通知Watcher，Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁，当Observer监听到数据发生改变的时候，通过Updater来通知Compile更新视图。而Compile通过Watcher订阅对应数据，绑定更新函数，通过Dep来添加订阅者，达到双向绑定。

Vue实例从创建到销毁的全过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程。

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

它可以分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后。

第一次页面加载时会触发beforeCreate、created、beforeMounted、mounted

DOM渲染在mounted中就已经完成。

1、beforeCreate：可以在这加个loading事件，在加载实例时触发；

2、created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；

3、mounted：挂载元素，获取DOM节点；

4、updated：如果对数据统一处理，在这里写上相应函数；

5、beforeDestroy：可以放一个确认停止事件的确认框；

6、nextTick：更新数据后立即 *** 作DOM。

1、对象方法v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

2、数组方法v-bind:class="[class1, class2]"

3、行内v-bind:style="{color: color, fontSize: fontSize+'px'}"

1、router-link标签会渲染为标签，咋填template中的跳转都是这种；

2、另一种是编辑式导航，也就是通过js跳转比如routerpush('/home')

M- model ，model 表示数据模型，也可以在model中定义数据修改和 *** 作的业务逻辑

V- view，view表示视图，它负责将数据模型转换为视图展示出来

VM- viewmodel，viewmodel是一个同步view和model的对象，连接view和model，用于监听数据模型的改变和控制视图行为

computed：computed是计算属性，也就是计算值，更多用于计算值的场景。它具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算。

watch：watch更多的是观察作用，类似于某些数据的监听回调，用于观察props、$emit或者本组件的值，当数据变化时用来执行回调进行后续 *** 作。它不具有缓存性，页面重新渲染时值不会变化也不会执行。

在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，但是也得慎用，样式不易改变。

解决方法：

① 使用混合型的css样式，混合使用全局样式和私有样式。

② 深度作用选择器：如果你希望scoped样式中的一个选择器能够作用的更深，可以使用>>> *** 作符。如：<style scoped>a>>>b{/ /}</style>

一个元素绑定多个事件的写法有两种：

1、修饰符的使用

2、在method方法里分别写两个事件

Vue组件中的data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用，如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

原理：JS执行是单线程的，它是基于事件循环的。所有同步任务都在主线程上执行，形成一个执行栈。主线程之外，还存在一个任务队列，只要异步任务有了运行结果，就在任务队列中放置一个事件。一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看那些对应的异步任务，等结束等待状态，进入执行栈，开始执行。主线程不断重复上面的步骤。主执行的执行过程就是tick，所有的异步结果都是通过任务队列来调度的。任务分为两大类：宏任务和微任务，宏任务包括：setTimeOut等，微任务包括promisethen。

Vue用异步队列的方式来控制DOM更新和nextTick回调先后执行。在下次DOM更新循环结束之后执行延迟回调，nextTick主要使用了宏任务和微任务，nextTick把要执行的任务推入一个队列中，在下一个tick同步执行队列的所有任务，它是异步任务中的微任务。如果我们在更新了一个响应式数据后，需要同步拿到这个渲染后的DOM结果，就使用nextTick方法，异步拿这个结果。

使用方式：

① this nextTickthen(cb); 异步

父组件调用子组件的方法

父组件： this$refsyeluosenchildMethod()

子组件向父组件传值并调用方法： $emit

组件之间： bus==$emit+$on

1、第一种方法是直接在子组件中通过this emit向父组件触发一个事件，父组件监听这个事件就行了。

3、第三种都可以实现子组件调用父组件的方法。

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用，你可以简单的监控watch $route对象：

is用来动态切换组件，DOM模板解析

全局的：前置守卫、后置钩子（beforeEach、afterEach）beforeResolve

单个路由独享的：beforeEnter

组件级的：beforeRouteEnter（不能获取组件实例this）、beforeRouteUpdate、beforeRouteLeave

这是因为在执行路有钩子函数beforeRouteEnter的时候，组件还没有被创建出来，先执行beforeRouteEnter，再执行周期钩子函数beforeCreate，可以通过next获取组件的实例对象，如：next((vm) => {})，参数vm就是组件的实例化对象。

缺点：

优点：

计算属性是需要复杂的逻辑，可以用方法method代替。

vue-cli提供的脚手架模板有browserify和webpack。

① 是什么？

Vue框架中的状态管理，分别是State、Getter、Mutation、Action、Module。

② 怎么使用？

新建一个目录store。

③ 功能场景？

单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车等。

④ vuex的状态：

a State特性：vuex就是一个仓库，仓库里面放了很多对象，其中state就是数据源存放地，对应于一般Vue对象里面的data。state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。它通过mapState把全局的state和getters映射到当前组件的computed计算属性中。

b Getter特性：getters可以对State进行计算 *** 作，它就是store的计算属性。虽然在组件内可以做计算属性，但是getters可以在多组件之间复用。如果一个状态只在一个组件内使用，可以不用getters。

c Mutation特性：改变store中state状态的唯一方法就是提交mutation，每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那我们需要执行一个相应的调用方法：storecommit。

d Action特性：类似于mutation，不同点在于：Action提交的是mutation，而不是直接变更状态。Action可以包含任意异步 *** 作，Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用contextcommit提交一个mutation。或者通过contextstate和contextgetters来获取state和getters。Action通过storedispatch方法触发：storedispatch('increment')。

e Module特性：Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分解为模块，每个模块中拥有自己的state、mutation、action和getter。

① 创建组件页面eg Toastvue

② 用Vueextend() 扩展一个组件构造器，再通过实例化组件构造器，就可以创造出可复用的组件。

③ 将toast组件挂载到新创建的div上；

④ 将toast组件的dom添加到body里；

⑤ 修改优化达到动态控制页面显示文字跟显示时间；

修饰符分为：一般修饰符、事件修饰符、按键、系统

① 一般修饰符：

② 事件修饰符

③ 按键修饰符

④ 系统修饰符（可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。）

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

在我看来，渐进式代表的含义是：主张最少。视图模板引擎每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

渐进式的含义，我的理解是：主张最少，没有多做职责之外的事。

1-1 vuex可以理解为公共仓库，我们可以把公共的数据，方法放到里面，所有的组件都可以调取

其数据和方法

1-2 但是vuex的数据一刷新就没了，我们可以用本地存储的方式vuex数据改变的状态

state 

存放公共的数据

mutations  

存放一些方法，这些方法可以用来改变state的数据， 如果我们想要改变state的数据，需要用mutations的方法 vuex提供了commit()方法 ，mutations是同步执行

actions

我们上次说mutations的方法是同步执行的，如果想把处理数据的方法改成处理异步方法，需要用actions,简单说是异步 *** 作数据，但是还是得通过mutations来 *** 作，因为actions不能直接改变state的数据  vuex提供了dispath()方法

getters

比如我们想对Store仓库的state数据进行过滤，二次封装，一般的话可以写在computed里，但是如果好几个组件都用到这个过滤后的数据，我们可以在getter里对这个数据直接封装，这样数据数据可以共享，可以理解为store的计算属性

modules

我们在做项目的时候有很多模块功能，每个某块都子的state,mutions,actions,getters,为了更好的管理实现模块化 

3-1 安装vuex

cnpm i vuex@next  -S;

3-2  创建一个strore文件里，并创建一个indexjs文件

import {createStore} from 'vuex'

import user from '/user/userjs'

export default createStore({

  state:{

  name:'全局的name'

  },

  mutations:{

  change(state,value){

  statename=value

  }

  },

  actions:{

  change(context,value){

  contextcommit('change',value)

  }

  },

  getters:{

  newname:(state)=>{

return statename

  }

  },

  modules: {

  user

  }

})

3-3创建子模块

export default {

namespaced: true,

state: {

name:'I,m is a userName'

},

mutations: {

change(state,value){

statename=value

}

},

getters:{

name:(state)=>{

return statename

},

newname(state, getters) {

    return gettersname

}

},

actions: {

change(context,value){

contextcommit('change',value)

}

}

}

3-3 入口文件的调用

import { createApp } from 'vue'

import App from '/Appvue'

import store from '/store'

createApp(App)use(store)mount('#app')

3-4 在组件里的使用

3-4-1:需要引进useStrore 

const store=useStore();

3-4-2:模块化的mutations方法的调用  

storecommit('user/change',value);

3-4-3:非模块化mutations方法调用

storecommit('change',value);

3-4-4：模块化的actions方法的调用  

storedispatch('user/change',value);

3-4-5:非模块化mutations方法调用

storedispatch('change',value);

3-4-6：获取模块化的getters的方法

let userName=computed(()=>{

return storegetters['user/newname']

})

3-4-7：获取非模块的getters的方法

let global=computed(()=>{

return storegettersnewname

});

<template>

<p>

{{global}}

<button @click="globalName('222')">mutations改变全局的name</button>

<button @click="chageName('55555')">actions改变全局的name</button>

</p>

<p>

{{userName}}

<button @click="changuserName('3333')">

mutations改变局部的name

</button>

<button @click="changeUser('8888')">

actions改变局部的name

</button>

</p>

</template>

<script>

import {ref,computed} from 'vue'

import {useStore} from 'vuex'

export default{

setup(){

const store=useStore();

let global=computed(()=>{

return storegettersnewname

});

let userName=computed(()=>{

return storegetters['user/newname'];

});

//通过mutations的方法改变数据

let globalName=(value)=>{

storecommit('change',value)

}

//通过mutations的方法改变数据

let changuserName = (value)=>{

storecommit('user/change',value)

}

//通过actions的方法改变数据

let chageName=(value)=>{

storedispatch('change',value)

}

//通过actions的方法改变数据

let changeUser=(value)=>{

storedispatch('user/change',value)

}

return{

global,

userName,

globalName,

changuserName ,

chageName,

changeUser

}

}

}

</script>

<style>

</style>

以上就是关于Vuex中的方法全部的内容，包括:Vuex中的方法、封装自定义hooks在setup中取出vuex的state、VUE vux深入浅出等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！