Vuex初步了解

1.什么是Vuex？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。

使用Vuex管理实现的场景:

用户的登录状态、
用户名称、
头像、
地理位置、
商品收藏、
购物车的物品
…

2.安装使用Vuex

 npm install vuex --save

构建步骤:

1.在src文件夹下创建文件夹store,并创建index.js文件

2.在index.js文件中引入相关依赖并加载安装Vuex插件

import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex);//安装插件

3.创建store对象

const store=new Vuex.Store({

state:{…//多页面共享数据的声明},
mutations:{…//处理多页面共享数据的执行方法,该方法必须有一个state参数,用于获取state属性中声明的数据
actions:{…//类似于mutations属性，但是是专门用来处理异步操作的,这里定义的方法必须有一个默认参数context
getters:{…//用于处理多页面共享数据的计算属性,该计算属性默认必须有一个参数state.用于获取state属性中定义的数据
modules:{… //模块化store对象,解决单一状态树的问题,在这里注册的每一个模块都具有自己的state、mutations、action、getters等}
})

4.导出store对象

export default store

5.在main.js文件中引入stroe,并挂载到Vue实例对象上

6.在组件的元素标签中,我们可以通过 " $store.state.共享数据变量名 " 的方式直接获取state属性中设置的数据;在事件执行方法中则通过" this.$store.共享数据变量名 " 的方式获取

3.如何修改state属性中的共享数据

(1)在mutations属性中定义修改state属性中共享数据的方法,该属性中定义的每一个函数方法都默认必须有一个state参数,用于获取state属性中的数据

  mutations:{
      方法名:function(state){
        ...通过 state.数据名 处理state属性中的数据.
      }
    }

(2)在组件页面中对元素监听事件,在事件执行方法中通过 this.$store.commit(‘mutations属性中对应的方法名’) 来提交调用mutations属性中相应的方法.

4. 单一状态树

Vuex提出使用单一状态树，英文名称为Single Source of Truth,即单一数据源 也就是要求我们在indexjs文件中只创建一个store实例对象

5.store实例对象中的getters属性的使用

getters属性相当于组件中的计算属性,即:将state属性中定义的多页面共享数据在getters属性中经过处理后再在页面中使用.

 (1)在getters属性中定义方法,在该方法中return处理后的数据。getters属性中的每一个方法默认必须有一个state参数,然后我们通过 " state.共享数据名 " 的方式获取到state属性中设置的数据,然后对它进行相应的处理
              getters:{
                方法名:function(state){
                      return ...处理数据 state.数据名
                }
              }
 (2)在组件标签中,通过 $store.getters.getters属性中相应的方法名 这种方式获取处理后的数据,然后进行展示
                <p>{{$store.getters.getters属性中相应的方法名}}</p>
          补充:
              在getters属性中定义的计算方法,除了默认的参数state外,还可以有第二个参数getters,同过这个参数,我们可以调用getters属性中的其他计算方法

6.getters属性如何进行接收参数传递

(1)在getters属性中定义计算方法时,方法中return 的是一个带参函数(这个参数用做接收我们传递进来的数据的容器),然后我们在这个函数中再进行数据处理,最后将处理好的数据return出去.
          getters:{
            //定义计算方法
            getFilterStu:function(){
              return function(arg){
                return ...进行相应的处理
              }
            }
          }
 (2)在组件标签中,通过 $store.getters.getters属性中相应的方法名 这种方式进行传参获取处理后的数据,然后进行展示
            <p>{{$store.getters.getters属性中相应的方法名(传递的参数)}}</p>

7.store对象中的mutations属性如何进行参数传递与接收

mutations属性中主要包括两个部分:
 1.字符串的事件类型Type
 2.相应的回调函数callback(state),该函数的第一个参数必须是state.
        Type:callback(state){...};
参数接收处理
(1)在mutations属性中定义方法时,除了默认必须有的参数外,可以添加其他参数作为接收容器
          mutations:{
            //定义方法
            方法名:function(state,容器参数){
              ....处理代码
            }
          }
 (2)在组件页面,为组件添加事件监听,在事件执行方法中,通过 this.$store.commit('mutations属性中对应的方法',需要传递的参数) 这种方式进行参数传递

8.组件执行方法提交申请mutations属性中的方法的提交方法

 (1)this.$store.commit('mutations属性中对应的方法',...需要传递的内容);
    (2)this.$store.commit({
      type:'mutations属性中对应的方法',
      ...需要传递的参数
    })
      注意：第二种方式传递的参数是一个对象,因此,在mutations属性中的方法接收的参数是一个对象,我们需要用对象的方法提取传递过来的数据。

9.Vuex管理数据的响应式

 Vuex的实例对象store的属性state中定义的数据是响应式的,即:初始在state属性中定义的数据,是响应式数据.
        如果是通过普通方法后加入state属性中的数据,不是响应式的数据.
        如何通过方法为state属性中添加响应式的数据:在mutations属性中定义的方法中通过:
              Vue.set(arg1,arg2,arg3);
                    arg1:被操作的目标
                    arg2:如果被添加数据的目标是对象,这里为键名;若是数据,则这里为值.
                    arg3:如果被添加数据的目标是数组,这里为键值;若是数据,则不需要arg3参数
        如何通过方法响应式的删除state属性中的数据,在mutations属性中定义的方法中通过:
              Vue.delete(arg1,arg2);
                    arg1:被操作的目标
                    arg2:需要删除的对象

10.store实例对象中的action属性中进行异步操作,能够同步更新数据

 我们不希望在mutations中进行异步操作,因为这会导致我们的数据内容不同步,但有时候又会有异步操作的要求(网络请求),所有规定在actions属性中进行异步操作。actions属性类似于mutations属性,用来进行我们的异步操作,在actions属性中定义的方法默认必须有一个参数context
      通过在actions属性中进行异步操作，从而更新state中的数据的步骤:
            (1)在mutations属性中定义更新state属性中数据的方法(默认必须有state参数)
            (2)在actions属性中定义方法(默认必须带有参数context),在该方法中进行异步操作,在该异步操作中通过 context.commit('在mutations属性中定义的执行更新操作的函数') 这个方式调用mutations属性中相应的更新方法
            (3)在组件页面通过监听事件,在事件的执行方法中调用actions属性中的相应方法
                  this.$store.dispatch('actions属性中定义的执行异步操作的函数名');
        提示:若是我们想要传递参数,可以在步骤二actions属性的方法中添加第二个参数用做参数的接收容器。然后在步骤三的执行方法中进行传递参数 this.$store.dispatch('actions属性中定义的执行异步操作的函数名',{...需要传递的内容})

11.在配置store实例对象的属性时,我们推荐将其属性进行模块化抽离配置,有利于帮助我们代码阅读性提高

 分别将mutations,actions,getters,modules属性抽离为单独的js文件,在这些单独文件中配置相应的内容。引入,挂载。