vuex的使用，相关配置的解读及使用state、mutations、actions、getters，vuex的辅助函数用法

目录

一、vuex是什么、作用、特点、使用场景

二、vuex的入门使用步骤

三、vuex的模块化用法

 四、vuex的相关配置用法解读

        1、state是提供共享数据的唯一根节点，两种方式定义，类似于data

        2、 mutations是修改共享数据state的唯一节点，类似于methods

        3、 actions内可写任何异步操作，注意提交的是一个mutation，不能在actions中直接修改state数据，使用时需要与mutations配合

        4、getters内定义的数据和计算属性相同，值的获取依靠其他值的改变       

五、vuex的辅助函数mapState\mapMutations\mapActions\mapGettes使用方法

补充点：

---

一、vuex是什么、作用、特点、使用场景

        vuex 即状态管理工具，状态也就是数据，主要是为了方便多组件之间的数据共享。多组件之间处理数据省去了组件通信（父传子、子传父，跨组件）的代码繁琐，但是会附加更多的框架中的概念进来，增加项目的复杂度。

        特点：

                响应式：只要仓库变化，其他所有访问此仓库的相关数据都更新

                数据操作简洁（将数据放在了仓库内，通过指令组件可直接访问，内置辅助函数）

        使用场景：

                多组件的 通用 的共用数据 （私有数据仍储存在自身data中，）

                1、当一个组件需要多次派发事件时

                        例如：用户在登录后的用户信息，需要在全部组件中使用；购物车数据多个页面来调用此数据进行展示

                2、跨组件共享数据、跨页面共享数据

                        例如：订单详情组件内，需要用到购物车内的一些数据

二、vuex的入门使用步骤

在项目下创建文件src>store>index.js，

        1、下载vuex包   (vue2项目下载vuex@3.4.0 ，vue3项目下载vuex@4.0.2)

                        yarn add vuex@3.4.0     或   npm install vuex@3.4.0

        2、在index.js文件内创建仓库，

//2、导入vue 、 vuex 
    import Vue from 'vue'
    import Vuex from 'vuex
//3、注册
    Vue.use(Vuex) //所有的外部插件在vue内使用都需注册
//4、创建仓库
    const store = new Vuex.Store()
//5、导出仓库至main.js挂载
    export default store

        3、在main.js文件内挂载至vue        

import store from './store'
new Vue({
    store:store
})

        上面实现了空仓库的创建和挂载使用至项目，基础配置如下

//src>store>index.js文件内
const store =new Vuex.Store({
 //state是提供共享数据的唯一根节点，作用类似data
    state:{}, 
//mutations是修改共享数据state的唯一节点，作用类似于methods,切记：只能通过mutations内方法来修改state内数据，且方法必须为同步操作
    mutations:{},   
//actions处理异步操作，通过mutations来处理state，类似于methods
    actions:{},  
 //getters内相当于计算属性computed，此内值的获取需要state内值的变化得到 
    getters:{},  
//用来模块化仓库，挂载模块节点的方法
    moudels:{},   
    
    strict:true  //开启严格模式，开发阶段建议开启，
    
})

三、vuex的模块化用法，项目中一般会将vuex仓库模块化使用

        原因：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿，vuex会越来越难以维护，所以才用到vuex的模块化，方便维护查找。

在新建的vuex仓库文件内新建modules文件夹存放各个模块后的仓库，创建各组件对应的子仓库数据，后导出各自的{ state：{}，mutations:{},...},再引入到仓库的总文件内，实现挂载）

1、src>store>index.js内挂载模块化的节点，

import user from './modules/user'
new Vuex.Store({
    modules:{  //挂载模块的节点
        user:user,   //模块名 : 模块对象   模块对象就是导入的文件名
        ···
    }
})

2、src>store>modules文件夹内，创建各子仓库文件，最后导出

//模块化的仓库文件
export default {
  state: { },
  mutations: { },
  actions: {},
  getters: {},

  namespaced: true //开启命名空间，注意必须设置此项，才可以调用指定仓库内数据
};

 四、vuex的相关配置用法解读

        1、state是提供共享数据的唯一根节点，两种方式定义，类似于data

export default {
  // { state(){ return { 属性名：值 ，...} }   不常用
  state: {
    name: "user名", //属性名：属性值
    age: 12,
    arr: [1, 2, 3, 4, 5, 6, 8],
  },
};

        组件中使用共享数据方式  $store.state.属性名 ，模块化后为$store.state.模块名.属性名

        2、 mutations是修改共享数据state的唯一节点，类似于methods

export default {
  mutations: {  //mutations内必须是同步任务
    方法名(state) {  //state为固定写法，表示state数据
      state.count++;   
    },
  },
};

                 组件内调用方法 $store.commit('方法名') ,模块化后为 $store.commit('模块名/mutations内方法名')
       注意点：mutations参数传递，只能传递一个参数，多参数时用数组、对象包裹，
                参数传递：$store.commit('模块名/mutations内方法名' ，参数)
                接收：mutations:{  方法名(state , 形参){}  }
       /*注意*/  mutations内必须是同步任务，异步任务只可以定义在actions内

        3、 actions内可写任何异步操作，注意提交的是一个mutation，不能在actions中直接修改state数据，使用时需要与mutations配合

export default {
  actions: {
    addOneAwait(context) {
      //context表示JS文件上下文的意思，固定写法，可以访问mutations内的同步方法
      setTimeout(() => {
        //异步操作
        context.commit("add"); //通过context.commit来调用mutation的同步任务来操作state数据
      }, 1000);
    }  }  };

               组件内使用时： $store.dispatch( 'addOneAwait' ) ，模块化后: $store.dispatch('模块名/actions内方法名')
           注意点：若异步操作需要传参，则mutation中定义的方法接收参数，actions中的异步方法也接收参数，从$store.dispatch('异步方法名'，唯一实参)传递，异步调用同步mutation来修改state数据
                接收使用：mutations:{  add(state,n){state.num += n}},
                actions:{ setTimeout( ()=>{ addAwait(context,n){ context.commit('add',n) } },1000 )}
                传值： $store.dispatch('模块名/actions内方法名',10)

        4、getters内定义的数据和计算属性相同，值的获取依靠其他值的改变       

export default {
  getters: {
    newArr(state) {
      //此处state参数可以访问到state内的数据，不可修改其内的值，只可return出自己的值 ，将state换为getters,也可访问到getters内的数据
      return state.arr.filter((item) => item >= 5);
    }  }  };

         组件内使用时: $store.getters( 'newArr' ) ，模块化后 $store.getters['模块名/getters内属性名']

五、vuex的辅助函数mapState\mapMutations\mapActions\mapGettes使用方法

        1、组件内导入，使用方法解构值

<script>
//将各自对应的辅助函数导入
import {mapState , mapMutations,mapActions,mapGetters} from 'vuex'
export default{
  computed: {   //state,getters类似于computed，在其内解构
    ...mapState('模块名',['name','state内属性名']),
    ...mapGetters('模块名',['names','getters内属性名'])
  },
  methods:{  //mutations,actions类似于methods，在其内解构
    ...mapMutations('模块名',['add','mutations内方法名']),
    ...mapActions('模块名',['addNAwait','getters内方法名'])
  },
</script>  

        2、组件内使用值时的方法：

$store.state.模块名.属性名  //state内数据
$store.commit('模块名/mutation内方法名 ')   //mutations内方法
$store.dispatch('模块名/actions内方法名')  //actions内方法
$store.getters['模块名/属性名']   //getters内数据

        不使用vuex模块化的解构方法，将 '模块名' 删除即可，组件内使用方法第四点已写明

        vuex模块化后不建议使用辅助函数，多个子模块文件内若有相同属性，调用值时便会出错，建议使用基础语法即以上的第2点

补充点：

        1、v-model数据的双向绑定在vuex中不可使用，只能v-bind：去绑定value，然后用mutation中定义的方法去改变state中的数据

        2、mutations内声明同步任务，actions内声明异步操作（定时器、Ajax数据请求、promise方法等等）

（用vuex数据管理工具，之前做过一个todos案例，感兴趣的可以看看，省去了组件通信传值的繁琐）

链接