vuex Demo 理解其用法

1.安装 vuex

    npm install vuex --save

2. vuex的使用

• state 用来数据共享数据存储
• mutation 用来注册改变数据状态
• getters 用来对共享数据进行过滤操作
• action 解决异步改变共享数据

我们在index.js中进行store的实列化

image.png

再把实列化的store引入就是所谓的index.js文件夹引入到main.js中，
也可以同时把store注册到每一个组件中

image.png

state如何用？

我们可以在state中先声明一数据值

image.png

那我们如何在首页中拿到这个title值

image.png image.png

title这个数据已经在全局被共享了

matutions如何使用

应用场景：如果我们要改变顶层的共享数据，我们应该要用matutions来进行改变，如果你做公众号，后台一般会在连接的上给你一些参数，比方说sid,ck,tm,或者一些其它东西，你想把他存在state中，如果去做，那我们就通过matutions来进行注册事件，为了演示，我才这么做
注意：对于vuex，我只推荐state状态存储只在一个页面中组件与组件这间的通信，不适合夸页在， 放一些状态

image.png

我们对改变state数据进行一个事件注册，第一个参数是拿到state对象，第二个是传入的参数

• getTitle官方说是type，其实就是注册的事件名
• 可以是单个参数
• 如果是多个参数，我们则用对象放入，如果你写两个参数，会报错

image.png

我们自己创建一个视图，然后在created里进行截取参数，因为store是注册到每个组件中的，所以我们要用this.$store来访问，那commit就是一个触发器，第一个是type类形名，第二个参我们用对象的方式传入
在首页改变title的值 在其他页面使用的时候

image.png

getters如何使用

如果说getter就是对state里的数据进行一些过滤，改造等等

那比方说State里有一些这样的数据

image.png

如果我们定义这些数据，然后我们要从，这些数据中筛选出年纪大于30的人，再进行返回，我们就可以用到getter,这里的getter的意思就是对vuex顶层数据进行过滤，而不改动state里原本的数据

image.png

好我们如何应用呢，我们在组件中里只要写入

image.png

那我们可以打开命台看一下，看回的数据，

image.png

action 如何使用？

action.是用来解决异步流程来改变state数据的，有想人说，那我直接在matution里面进行
写进不就行了麻，那你可以试一下，因为matution是直接进行同步操作的

image.png

还是拿上面例子，如果你在mutations里进行异步操作，你会发现没用，并不会起任何效果，那怎么办，只有通过action->mutations->states,这个流程进行操作

写一个getParamSync函灵敏，第一个参数就是上下文，context是一个store对象，你也可以用解构的方式写出来,第二个参数还是我们要写入的接收到的参数，来改变触发mutations事件,再通过mutation来改变state,很好理解不难
然后我们就在组件里这么调用就可以了

image.png

写一个getParamSync函灵敏，第一个参数就是上下文，context是一个store对象，你也可以用解构的方式写出来,第二个参数还是我们要写入的接收到的参数，来改变触发mutations事件,再通过mutation来改变state,很好理解不难
然后我们就在组件里这么调用就可以了

image.png

那组合action又是怎么玩呢？我们有时候向后台请求时，要通过第一个AJAX返回值来进行下一个action分发

我们可以用promise来进行异步处理

image.png

在getParamSync使用new promise之后，在resolve里返回‘成功’，再分发一个changenameSync改变name的action方法

image.png image.png

我们就可以在组件中进行一种链式调用，解决异步回调，来action套action,就成了一个组合action

关于其它辅助用法

• mapState 辅助函数
• mapGetters 辅助函数
• mapMutations 辅助函数
• mapActions 辅助函数