5分钟搞懂vuex(MarkSheng)

以你之姓@ 2022-11-03 00:49 158阅读 0赞

**先说一下vuex到底是什么？**

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。

也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

**vuex中，有默认的五种基本的对象：**

*  state：存储状态（变量）
 *  getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
 *  mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
 *  actions：异步操作。在组件中使用是$store.dispath('')
 *  modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

下面我们正式开始，一步步使用vuex

**1、首先创建一个vue-cli项目**

执行下面的命令，创建一个app项目（这里也可以使用其他非webpack模板，以及非app名称）

vue init webpack app

![bdc53f6a288288ec0124f55f1757ddd4.png][]

**2、创建完成之后，我们进入文件夹下，并且运行项目**

cd app/
    npm run dev

接下来我们在src目录下创建一个vuex文件夹

并在vuex文件夹下创建一个store.js文件

文件夹目录长得是这个样子

![71ed1c548d2a7441f3343f2b533dd8a6.png][]

**3、目前我们还没有引入vuex，我们需要先下载vuex，并且引入它**

在保证我们处于我们项目下，在命令行输入下面命令，安装vuex

npm install vuex --save

![9e0f403c46cf608e9ca70e3ca5cbc41c.png][]

**4、安装成功之后，我们就可以在store.js中尽情玩耍我们的vuex了！**

在store.js文件中，引入vuex并且使用vuex，这里注意我的变量名是大写Vue和Vuex

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const state = {
        count: 0
    }
    
    export default new Vuex.Store({
        state
    })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

![47fa36a77fea3b175e67c190dd4bb62d.png][]

接下来，在main.js中引入store

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './vuex/store' // 引入store
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
        el: '#app',
        router,
        store,
        components: { App },
        template: '<App/>'
    })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

然我我们在任意一个组件中就可以使用我们定义的count属性了。

这里我们在helloWorld中使用一下，去除helloworld.vue中不用的标签

<template>
      <div class="hello">
        <h3>{
      {$store.state.count}}</h3>
      </div>
    </template>

打开我们刚才运行项目的浏览器，可以看到已经使用成功了！

![b5e541f725d35a94eb7e8a6fb2f15f78.png][]

并且在vue开发工具中我们可以看到我们定义的变量count

![46bf4850f10aba6e3cf99b88a478fdd7.png][]

到这一步，已经成功了一小半！vuex很简单吧？

回想一下，我们只需要在下载安装使用vuex，在我们定义的store.js中定义state对象，并且暴露出去。

在main.js中使用我们的store.js（这里是为了防止在各个组件中引用，因为main.js中，有我们的new Vue 实例啊！）

现在我们已经使用了vuex中的state，接下来我们如何操作这个值呢？ 没错！用mutations和actions

我们继续操作store.js文件

我们在sotre.js中定义mutations对象，该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。

我们在mutations中定义两个方法，增加和减少，并且设置一个参数n，默认值为0，然后在Vuex.Store中使用它

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

/**
     * mutations 里面放置的是我们操作state对象属性的方法
     */
    const mutations = {
        mutationsAddCount(state, n = 0) {
            return (state.count += n)
        },
        mutationsReduceCount(state, n = 0) {
            return (state.count -= n)
        }
    }
    export default new Vuex.Store({
        state,
        mutations
    })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

然后我们在helloWorld.vue中，使用这个方法

还记得我们如何在组件中使用mutations吗？就和自定义事件非常相似

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

<template>
      <div class="hello">
        <h3>{
      {$store.state.count}}</h3>
        <div>
          <button @click="handleAddClick(10)">增加</button>
          <button @click="handleReduceClick(10)">减少</button>
        </div>
      </div>
    </template>

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

methods: {
        handleAddClick(n){
          this.$store.commit('mutationsAddCount',n);
        },
        handleReduceClick(n){
          this.$store.commit('mutationsReduceCount',n);
        }
      }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

来浏览器看一下效果如何！

我们可以看到每当触发事件时，我们都可以在vue开发工具中看到我们触发的mutations方法，以及参数

完美！

![54e939b0990ce6c93334f472daac23c4.png][]

接下来就是actions，actions是异步操作

创建actions对象，并且使用

这里我在两个方法中使用了两个不同的参数，一个是context，它是一个和store对象具有相同对象属性的参数。在第二个函数中，我是直接使用了这个对象的commit的方法。

凭大家喜好就行

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

const actions = {
        actionsAddCount(context, n = 0) {
            console.log(context)
            return context.commit('mutationsAddCount', n)
        },
        actionsReduceCount({ commit }, n = 0) {
            return commit('mutationsReduceCount', n)
        }
    }
    export default new Vuex.Store({
        state,
        mutations,
        actions
    })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

在helloWorld.vue中

在methods中，增加两个方法，使用dispath来触发

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

handleActionsAdd(n){
          this.$store.dispatch('actionsAddCount',n)
        },
        handleActionsReduce(n){
          this.$store.dispatch('actionsReduceCount',n)
        }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

进入浏览器看下效果如何！

最后就是getters

我们一般使用getters来获取我们的state，因为它算是state的一个计算属性

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

const getters = {
        getterCount(state, n = 0) {
            return (state.count += n)
        }
    }
    export default new Vuex.Store({
        state,
        mutations,
        actions,
        getters
    })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

<h4>{
      {count}}</h4>

const getters = {
        getterCount(state) {
            return (state.count += 10)
        }
    }

getters算是非常简单的了。

到这里，如果全都看懂了，vuex你已经没有压力了。

但是vuex官方给了我们一个更简单的方式来使用vuex， 也就是 \{mapState, mapMutations, mapActions, mapGetters\}

只要我们把上面基础的搞懂，这些都不在话下，只是方面我们书写罢了。

就这么简单，这里我们用到了es6的扩展运算符。如果不熟悉的同学还是去看看阮一峰大神的《Es6标准入门》这本书，我是看完了，受益匪浅！

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

同理，getters和 state也可以使用 mapState，mapGetters

如果你更懒的话，我们可以使用数组，而非对象，或者es6里面的对象简写方式

就像这种

![531f4f698b0c9a7b40111a826225a9f6.png][]

最后，如果大家发现有什么问题，或者错误的地方，欢迎留言交流。

分割线----------------------------------------------------------------------  
看到后台一些小伙伴问我用的什么编辑器，我这里用的是vscode，然后把我自己的一些配置给贴上，喜欢的话可以粘贴复制一下。

最近的效果是这样子的~~

字体用的是Fira Code 很好用的一种字体

![02d88c63f1296110c1f7ed10400073c6.png][]

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

{
        "editor.fontFamily": "Fira Code",
        "editor.fontLigatures": true,
        "editor.cursorStyle": "block",
      "editor.fontSize": 16,
      "editor.lineHeight": 24,
      "editor.lineNumbers": "on",
      "editor.minimap.enabled": false,
      "editor.renderIndentGuides": false,
      "editor.rulers": [120],
      "workbench.colorTheme": "Andromeda",
      "workbench.iconTheme": "vscode-great-icons",
      "editor.detectIndentation": false,
      "editor.tabSize": 2,
      "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
      },
      "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
      },
      "emmet.includeLanguages": {
        "wxml": "html"
      },
      "minapp-vscode.disableAutoConfig": true,
      "window.zoomLevel": -1,
      "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
      },
      "todo-tree.defaultHighlight": {
        "type": "text",
    },
    "todo-tree.customHighlight": {
        "TODO": {
            "icon": "check",
            "foreground": "#000",
            "background": "#cecb32",
            "iconColour": "#fffc43"
        },
        "FIXME": {
            "icon": "alert",
            "foreground": "#fff",
            "background": "#ca4848",
            "iconColour": "#ff4343"
        }
    },
    "todo-tree.highlights.customHighlight": {
      "TODO": {
        "icon": "check",
        "foreground": "#000",
        "background": "#cecb32",
        "iconColour": "#fffc43"
      },
      "FIXME": {
        "icon": "alert",
        "foreground": "#fff",
        "background": "#ca4848",
        "iconColour": "#ff4343"
      }
    },
    "todo-tree.highlights.defaultHighlight": {
      "type": "text"
    }
    }

[bdc53f6a288288ec0124f55f1757ddd4.png]: /images/20221024/6e4257564ed84d23a665a9b9c141ba81.png
[71ed1c548d2a7441f3343f2b533dd8a6.png]: /images/20221024/366fde26bb3843db8b330f53b7be5e28.png
[9e0f403c46cf608e9ca70e3ca5cbc41c.png]: /images/20221024/d063d07552214822aa866f8082c276cf.png
[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221024/cdfdd410f53f4520a1edd5d41bb836eb.png
[47fa36a77fea3b175e67c190dd4bb62d.png]: /images/20221024/273fe1ba2b654913a61be5fbd35f2f9e.png
[b5e541f725d35a94eb7e8a6fb2f15f78.png]: /images/20221024/6543d1b20e5c4e3a849efd2060fd3548.png
[46bf4850f10aba6e3cf99b88a478fdd7.png]: /images/20221024/afcc7106d0324d16bdd39a113d963387.png
[54e939b0990ce6c93334f472daac23c4.png]: /images/20221024/74f8bfeac9ad462b83d3dc2e9359a35b.png
[531f4f698b0c9a7b40111a826225a9f6.png]: /images/20221024/3ee09e3418d146abba3485c034038d6a.png
[02d88c63f1296110c1f7ed10400073c6.png]: /images/20221024/6bb025e32a364213b4ab3cabc4b535f6.png