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 映射到局部计算属性。