vuex-超级详细基本使用方法（超级好看）

vue详细介绍

---

一、什么是vuex

1.1官方介绍：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.2简单总结：

vuex就是一个数据管理的仓库。
1. 也就是把组件公共的数据放在一个仓库里统一管理，在这个仓库的内部对数据进行增删查改。
2. 这样可以减少组件之间的通信，让组件数据的共享化。只要仓库的数据发生变化，各个组件引用到的数据也会更新。这样使得数据的可维护性更好。

---

二、vuex 基础

2.1.state

概念：

定义全局参数，所有的数据都会存储到state里面，也就是用来存数据的地方

使用：

借助辅助函数

<script>
//引入辅助函数
import { mapMutations, mapState } from "vuex";
  computed: {
    ...mapState(["count"]),
  },
 </script>
<template>
    <h5>count :{{ $store.state.count }}</h5>
    <h5>count :{{ count }} 辅助形式</h5>
   </template>

2.2.muations

概念：

在vuex中，mutations里面存的就是一些操作数据的方法，也是将唯一能够修改数据的方法放在mutation对象里。

使用：

同样也是两种访方式，
常规方法 / 辅助函数

    //定义修改vuex数据方法 只能这里修改数据
  mutations: {
      addCount(state, payload) {
          state.count += payload
      }
     },

 //直接从原型上调用
   <button @click="$store.commit('addCount', 1)">+1常规方法</button>

   //利用辅助函数
     <button @click="addCount(100)">+100辅助函数</button>
   <script>
   import { mapMutations, mapState } from "vuex";
     methods: {
   ...mapMutations(["addCount"]),
 },
   </script>

2.3.actions

概念：

Actions和Mutations比较类似，包含的都是一些方法，区别在于 Action支持异步操作，一般会与Mutations的方法配合使用，在Action里面进行异步操作，然后再Mutations去更改数据

使用：

//vuex内定义action方法
 // 异步修改数据
    actions: {
        setCount2(context, payload) {
            setTimeout(() => {
                console.log(context, '111');
                context.commit('addCount', payload)
            }, 1000)
        },
    },

//常规调用
 <button @click="$store.dispatch('setCount2', 5)">异步</button>

//借用辅助函数，
<button @click="setCount2(5)">异步辅助函数</button>
import { mapActions } from "vuex";
  methods: {
    ...mapActions(["setCount2"])
    }

2.4.getters

概念：

每次打开浏览器优先执行该方法，获取所有的状态并且对数据进行一些加工和处理,有点像过滤器。
也可以再getters里面导出state数据的跨界访问方式。

使用：

//vuex 定义getters方法
    getters: {
        count: (state) => state.count
        //也可以做数据处理
         showAge(state) {
              if (state.count< 18) {
                 return '仙女'
               } else {
         	      return '老巫婆'
               }
         }
        
    },

  <div>getters导出: {{ count }}</div>
  <script>
  import { mapGetters } from "vuex";
    computed: {
    ...mapGetters(["token", "name", "count"])
    }
  </script>

2.5modules

概念：

在数据种类多，且有命名重复的情况，Vuex 允许将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

modules中每一个模块都可以设置一个namespace=true，也就是相当于给每个子模块仓库装了一个门（）

使用：

    modules: {
        user: {
        	//门
            namespaced: true,
            state: {token: '21111'},
            mutations: {ddCount(state) {state.token += 1}},
            actions: {},
            getters: {}
        },

访问里面的数据
namespaced: false,模块里面的每个子模块的数据方法跟上面的方法一样的
namespaced:true,访问这个子模块的时候需要定位，也就是找到门再能拿数据，比如

//访问state
  <div>用户token: {{ $store.state.user.token }}</div>
     ...mapState("setting", ["name"]),
  //访问mutations:
     ...mapMutations(["user/upDateToken"]),

总结

差不多就这样，关于vuex的使用的话就潦草的这么多，关于模块、namespace的详细用法可以再去查一查，vuex的使用还是给组件通信带来很大的方便！