Vuex学习笔记2

如果不熟悉vuex,将这个流程背下来先

vuex大致工作流程图

用户通过dispatch触发actions

actions通过commit触发mutations

mutations改变state

伴随state的改变,重新渲染组件

vuex可以理解成vue的插件,一般用于大型项目.

将store理解成一个商店

原先data里放的数据放到了state里

组件私有的data放私有属性

试着用老的vue脚手架先搭建个vue项目

先看下node有没有安装

具体教程:Vue,SpringBoot基础上自己搭建前后端分离应用平台_fhrui的博客-CSDN博客

vue项目创建完成

vuex使用  我是将vuex   比作是vue的一个插件使用

 vue官网:cn.vuejs.org

按官网说明安装

npm install vuex -s   

原先用的npm install vuex

 重新装了一下 

 

关于npm install的一些扩展

npm install X -g

• 安装模块到全局，不会在项目node_modules目录中保存模块包。
• 不会将模块依赖写入devDependencies或dependencies 节点。
• 运行 npm install 初始化项目时不会下载模块。
  npm install X
  *会把X包安装到node_modules目录中
  *不会修改package.json
  *之后运行npm install命令时，不会自动安装X
  npm install X --save
• 会把X包安装到node_modules目录中
• 会在package.json的dependencies属性下添加X
• 之后运行npm install命令时，会自动安装X到node_modules目录中
• 之后运行npm install --production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中,即是在线上环境运行时会将包安装
  npm install X –save-dev
• 会把X包安装到node_modules目录中
• 会在package.json的devDependencies属性下添加X
• 之后运行npm install命令时，会自动安装X到node_modules目录中
• 之后运行npm install –production或者注明NODE_ENV变量值为production时，不会自动安装X到node_modules目录中

npm install moduleName # 安装模块到项目目录下
npm install -g moduleName # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。
npm install --save moduleName # --save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
npm install --save-dev moduleName # --save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

package.json

在main.js中导入vuex   其实也可以在同级目录自建  比如

 我是直接在main.js就这么干了   注意注意    最后都需要挂在到vue上

版本问题做了点改动

 npm run dev   启动时报错   后来发现是版本问题   

自己重新装了一下启动OK

如果你的vue版本是 2.X ，将vuex升到 3.X.X 就能够解决

npm install --save vuex@3.6.2

如果你的vue版本是 3.X ，将vuex升到 4.X.X 就能够解决

npm install --save vue@3.0.2
npm install --save vuex@4.0.0
 

启动

进入App.vue页面   全删了

 

在compoents里面加两个  vue文件

 

 然后修改App.vue

将写好的两个组件导入页面

 有报错.npm install --save @vue/composition-api

 我这的版本

 如果是vue3.0以上可能还得在main.js文件导入一下

1、npm install --save @vue/composition-api

2、在main.js中引入

import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi)

小架子搭好,现在开始使用，改天再用.................................................

为了演示效果

还是自建一个store.js

 那么 man.js里的可以去掉

 

通过计数器演示Vuex

组件访问共享数据的一种方式:

在stroe state里定义一个共享数据

组件中可以用插值表达式this.$store.state.count来访问共享数据

在<template>里this可以省略

 

 

访问共享数据的第二种方式: 

按需导入 mapState函数: import {mapState} from 'vuex'

 比如在某个组件中,需要用到共享数据count

将共享数据映射为当前组件的计算属性

computed:{

        ...mapState(['count'])

}

关于vue     1.created   2.computed  3.mounted  自己记忆的一种方式

 组件访问共享数据的两种方式:

1.this.$store.state.count

2.导入mapState---->import {mapState} from 'vue'

   然后computed:{

                ...mapState(['count'])              

          }

---------------------------------------------------------------------------------------------------------------------------------

实现点击+1让  count自增(下面这种方式没学过vuex的自然而然的会用,但实际是不推荐的)

 

 

注意注意注意  此种方式是及不推荐的,也是错误的.别问为什么,反正不让你这么干

在Vuex中,推荐使用Mutation用于改变Store中的数据      不推荐用this.$store.state.count此种方式改变共享数据

建议及意见:

1.只能通过mutation变更Store数据,不可以直接操作Stroe中的数据

2.通过Mutation这种方式虽然操作起来稍微繁琐,但是可以集中监控所有数据变化

 演示如何通过Mutation修改Store中的共享数据的第一种方式:

定义Mutation

const store=new Vue.Store({

        state:{

                count:0

        },

        mutations:{

                add(state){

                        //变更状态

                        state.count++

                }

        }

 })

//触发mutations

methods:{

        btnjy(){

                //触发mutations的第一种方式

                this.$store.commit('add')

        }

}

 正确做法:现在mutations中创建自增方法  state需要在第一参数

然后在加法组件 通过this.$store.commit('add')方式来调用

关于在触发Mutations时的参数传递问题:

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

定义Mutation

const store=new Vue.Store({

        state:{

                count:0

        },

        mutations:{

                //step为调用方传递过来的值

                addN(state,step){

                        //变更状态

                        state.count+=step

                }

        }

 })

 //调用方触发mutation

methods:{

        tbnjy2(){

                //在调用commit函数,触发mutations时携带参数

                this.$store.commit('addN',3)

        }

}

 

 

 演示如何通过Mutation修改Store中的共享数据的第二种方式:

通过this.$store.commit()是触发mutations的第一种方式,现在介绍mutations的第二种方式:

//1.从vuex中按需导入  mapMutations函数   上面访问共享数据的第二种方式相近  mapState函数

import {mapMutations} from 'vuex'

// 2.将指定的mutations函数,映射为当前组件的methods函数

methods:{

        ...mapMutations(['add','addN'])

}

 

 

 感觉好繁琐

 再实现一个减N的操作

 

比如现在有个需求,让+1延时一秒再执行

大概了解vue的可能都会如图这么去做

 vue不允许mutatins内有异步请求

原因devtools插件内状态检测不到改变

建议Action用于异步任务

如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接更改数据

正确方式:

 Action要改变共享数据  必须通过context.commit触发Mutation来改变数据

而dispatch()函数专门用来触发Action

记住 Action可以触发Mutation只有Mutation可以改变共享数据

现在在回想一下一开始画的那张图，应该多少理解了

触发Actions异步任务时如何携带参数

现在看起来应该很简单了

 

this.$store.dispatch()是触发antions的第一种方式,

触发antions的第二种方式:

//1.从vuex中按需导入 mapActions 函数

import {mapActions} from 'vuex'

通过导入的mapActions喊出,将需要的actions函数映射当前组件的methods方法

//2.将指定的antions函数,映射为当前组件的methods函数

methods:{

        ...mapActions(['addAsync','subAsync'])

}

 大概的规律是mapState放computed      mapMutations和mapActions里面的当方法给Methods里的其他方法调用

这里每次我们都是通过@click点击事件  然后去找对应的方法,介绍种更加简单的方式

直接调用

 ----------------------------------------------------------------------------------

Getter:用于对Stroe中的数据进行加工处理形成新的数据.

getter不会改变Store里的数据,只起到包装数据的作用,翻白眼

getter可以对Store中已有的数据加工处理之后形成新的数据

Store中数据发生变化,getter的数据也会跟着变化

//定义Getter

const store=new Vue.Store({

        state:{

                count:0

        },

        getters:{

                //进行包装(封装)并不会改变数据值

                showNum:state=>{

                        return '当前count值'+state.count

                }

        }

})

 

 如何访问使用Getter

使用Getters的第一种方式

this.$store.getters.名称

 比如我们改变文本,当时没有改变count值

 getters的第二种访问方式

import {mapGetters} from 'vuex'

copmuted:{

        ...mapGetters(['showNum'])

}

 

 Getters只起到包装作用,并不能改变数据值