VueX--VUE核心插件

使用VueX方法

1.安装vuex模块

        npm install vuex --save

2.作为插件使用

        Vue.use(Vuex)

3.定义容器

        new Vuex.Store({

            这里面放定义状态代码

        })

4.注入根实例

vuex代码,一般放在src/store/index.js文件中

如何在vuex中定义状态数据?

例:

        let store = new Vuex.Store({ //创建Vuex实例

         //这里定义状态数据

                state: {

                     count: 100

                 }

        });

vuex核心概念

store:类似容器,包含应用的大部分状态;

注意:

        * 一个页面只能有一个store

        * 状态存储是响应式的

        * 不能直接改变store中的状态,唯一途径显示地提交mutations

State:包含所有应用级别状态的对象

Getters:在组件内部获取store中状态的函数

Mutations:唯一修改状态的事件回调函数

Actions:包含异步操作、提交mutation改变状态

Modules:将store分割成不同的模块

如何获取定义的状态数据?

在需要获取数据的单页面文件组件中,使用以下方法:

如何改变vuex容器中(store)如的值?

方法1.改变非异步(不通过ajax)的值

    使用mutations属性,处理同步数据修改

例:

vuex对象中写:

在单页面文件组件中调用

注意:

mutations不能直接调用;

调用方法:    

    $store.commit("写mutations中的回调函数名");

    这个方法,一个参数的时候,是直接调用mutations函数。

    第二个参数,代表传入mutations函数的参数。

    第二个参数,可以是1个,多个的时候,传一个对象;

如:

    $store.commit("写mutations中的回调函数名",{n:2});

    这样在mutations:中就可以接收了

    commit的对象形式写法

    $store.commit({

        type:'写mutations中的回调函数名',

        de:10 //这个就是第二个参数,key名随便起

    })

方法2.改变异步(ajax获取)的值

使用actions:处理异步数据修改

    //要先写好mutations的方法

    mutations:{

      addIncrement(state){

    state.count +=1;

      }

      },

  /*

    当遇到数据是通过ajax异步请求过来的,这时数据会有延迟

    这种时候,就需要使用actions来提交mutations中的回调函数

*/

actions:{

    //函数名随便写,参数是一个对象,和store对象的方法属性都一样的对象;

        addAction(context){

    setTimeout(()=>{

      //通过context对象,可以使用commit方法,参数输入mutations中的函数名

              context.commit('addIncrement');

    },1000);

  }

}

调用actions中的函数,方法如下

dispatch传参的格式方法,与this.$store.commit()一模一样

this.$store.dispatch('addAction');

actions中的函数可以相互调用传值;

例:

actions:{

    //函数名随便写,参数是一个对象,和store对象的方法属性都一样的对象;

addAction(context){

    setTimeout(()=>{

    //通过context对象,可以使用commit方法,参数输入mutations中的函数名

              context.commit('addIncrement');

    //这里调用了下面的函数

              context.dispatch('testAction',{test:'测试'});

    },1000);

    },

    testAction(context,obj){//传值正常传

  //可以打印出'测试的数据'

  console.log(obj.test);

  }

  }

这里说明一下actions传值的另一种方法

actions:{

    //函数名随便写,参数是一个对象,和store对象的方法属性都一样的对象;

/*

这个context参数,可以使用es6的结构赋值方法写

      直接传一个对象形式{commit,dispatch} 把需要的方法直接写到里面,不用传context去调用对应的方法

      这样写更方便。

es6的结构赋值:把一个对象里面的属性,直接放到对象中;

*/

addAction({commit,dispatch}){

    setTimeout(()=>{

      //通过context对象,可以使用commit方法,参数输入mutations中的函数名

              commit('addIncrement');

      dispatch('testAction',{test:'测试'});

     },1000);

    },

    testAction(context,obj){

  console.log(obj.test);

  }

  }

getter计算状态

作用:关于状态数据中,一些对数据的处理(判断/过滤)等,都在getter属性中处理。

写法:在vuex对象中写

getters:{

  filterCount(state){//state就是状态对象

          //在这里做count的判断

          return state.count >= 120 ? 120 : state.count;

  }

  }

调用方法:

computed:{//在计算属性中取vuex定义的状态数据

              //getter的调用方法,就是在计算属性中,另定义一个函数,在这个函数中调用getter中判断过的值

            num2(){

    //$store中有getters属性,可以获取getter中的filterCount的值

                  return this.$store.getters.filterCount;

  }

}

HTML显示方法:

Vuex辅助函数

mapState:

        当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性。

mapGetters:

       辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

mapMutations:

       将 store 中的 mutations 映射到局部计算属性。

mapActions:

       将 store 中的 actions 映射到局部计算属性。

推荐阅读更多精彩内容