Vue-vuex：详解

vuex 可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面

然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用，并且数据之间是响应式

Vuex就是为了提供这样一个在多个组件间共享状态的插件

 

 

 

 

 

 

 

 

对于某些状态(状态1/状态2/状态3)来说只属于我们某一个试图

但是也有一些状态(状态a/状态b/状态c)属于多个试图共同想要维护的

 

这时候，就是全局单例模式 (大管家)

我们现在要做的就是将共享的状态抽取出来

交给我们的大管家，统一进行管理

之后，你们每个试图，按照我规定好的规定，进行访问和修改等操作

这就是Vuex背后的基本思想

 

 

安装 vuex

命令  npm install vuex --save

 

使用vuex

 

 

 

 

在App.vue中拿到 store数据       <h2>{{$store.state.counter}}</h2>      counter是放在state里面的数据

如果还需要对拿到的数据进行处理，如下图：

这时候，就需要用到mutations 属性了，这里面放的是方法：   

 

mutations传递参数，如下图

 

组件端调用mutations的方法

payload是负载的意思，初次之外还可以传递一个对象

 

 

 

 

 把state中定义的数据，传递进来处理

调用的组件，只需要在methods中 调用mutations属性中的方法即可

 

Mutation响应规则

 

 

 

 

Getter的基本使用

 

 

 

Getter中方法调用方法

 

 

 

 

Mutation常量类型

 

 

 

 

Action属性的使用

我们强调, 不要再Mutation中进行异步操作

但是，有时候，我需要用到ajax等操作，进行异步操作

此时，要想实现异步操作，就要用到vuex中的Action属性了

Action类似于Mutation, 但是是用来代替Mutation进行异步操作的

 

 actions: {
    // context: 上下文
     aUpdateInfo(context, payload) {
       setTimeout(() => {
         context.commit('updateInfo')
         console.log(payload.message);
         payload.success()
       }, 1000)
     },

 

 

 

 

 

Module属性

可以在module中添加state、mutations、getters、action

 

 

 

在store对象中引入module对象

 

 

 

在组件中使用module

 

 

 如果调用方法，是调用moduleA中的mutations和action属性

 

 

到此，vuex学完了

项目结构