VUE框架之vuex的讲解

                                                                                      VUE框架之vuex的讲解

                                                                                                                                        写于2020.8.5 家中

        本人被中考打败后，弃笔从戎，从一名弱弱的学生转变成一名合格退役的中国人民解放军陆军防空兵战士，从不学无术，到模具设计编程操作一条龙服务，从工厂狗到一名生意人，从机械专业转成软件行业。遇到太多的挫折和难以解决的困难，咬咬牙，在风雨后也感受到了成功的喜悦。

        今天分享的知识点是vuex的使用，以下是个人见解：vuex是用于vue项目中处理复杂组件结构中数据调用和存储的工具。比如在父子组件我们可以通过父组件传参给子组件，子组件可以拿到父组件传过来的参数。子组件传参给父组件通过$emit发射，父组件可以获取到子组件的参数。兄弟组件之间传参也是同样可以实习的，不过在组件与组件之间并没有关系的时候，我们就可以利用vuex来进行值的获取存储，相当于它是一个全局的文件。

        首先，我们需要在项目搭建的时候安装Vuex,此时搭建完的项目结构src下会出现一个store文件夹内有一个index.js文件。该文件就是我们的vuex文件，vuex文件内的结构如下：

开始引入了vue和vuex文件

import Vue from 'vue'

import Vuex from 'vuex'

export default new Vuex.Store({

  state: {   //用来定义数据

      name:'zkx'

  },

  mutations: {  //改变state内的值

  },

  actions: {   //管理或提交mutations

  }，

  getters: {  //store对象中的计算属性

      name(state){

     return state.name;     

}

  };

})

    接下来附图让大家了解一下xuex机制的

        重点：要改变Vuex中State的值，需要先store对象调用dispatch方法，Action 通过调用commit方法触发相应的Mutation 对State的值进行修改。

        下面简单的代码描述一下使用方式，从简单的开始：

        1.在某个组件内获取vuex内state的某个值：this.$store.state.name  //zkx 

        2.在某个组件内需要修改xuex内state的某个值：

          this.$store.dispatch('ABC');//‘ABC’为actions内的方法

          actions: {   //管理或提交mutations

              ABC({commit,state}){

                    commit('ABC');//此处的ABC是mutations内的方法

              }

          }，

            mutations: {  //改变state内的值

              ABC(state){

                state.name='zongkaixing'  

               }

           }

         此时vuex内的值被修改成zongkaixing

        3.getters的使用

        getters是vuex的计算属性，当我们要在自己的组件页面中引用需要先在组件script标签中  import {mapGetters} from 'vuex'

在计算属性computed:mapGetters(['name'])这样页面中用到直接{{name}}写入，这里的mapGetters是辅助函数,引入的就是vuex文件中的getters计算属性

       4.如果需要带数据参数进行修改vuex的name值：this.$store.dispatch('ABC','宗凯星');

actions: {   //管理或提交mutations

              ABC({commit,state},data){

                    commit('ABC',data);//此处的ABC是mutations内的方法

              }

          }，

            mutations: {  //改变state内的值

              ABC(state,data){

                state.name=data

               }

           }

       5.后期将追加辅助函数mapActions的使用，以及页面此时以及存在computed计算属性的内容又要引入vuex的计算属性写法。