一文搞定Vue3中使用Vuex

爱被打了一巴掌 2022-08-31 15:26 358阅读 0赞

伴随着Vue3的出现，基于Vue3的各种插件和框架也都陆续开发出来了。如Vue3对应的Vue-Router4.x和Elementui-plus等等，今天来聊聊基于Vue3的Vuex4.x。vuex4.x的官网如下：  
[https://next.vuex.vuejs.org/][https_next.vuex.vuejs.org]

## 安装Vuex ##

npm方式

npm install vuex@next --save

yarn方式

yarn add vuex@next --save

可以看到现在是使用vuex@next来安装next的版本的，使用以上命令安装的最新版本是4.0.2

yarn vuex info

倘若你想查看Vuex目前有哪些版本，你可以选择如下命令查看

![在这里插入图片描述][cddb38fc620442bfb15a110499dda03a.png_pic_center]  
可以预览版本纪录和更改时间

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][c0a325078410448eb70e1b9182ddfa2a.png_pic_center]  
目前最新latest还是3.6.2,为此我们使用的是next版本

## 创建store实例 ##

在项目的src下新建store文件夹，并在当前文件夹下创建index.js文件。

import {  createApp } from "vue"
    import {  createStore } from "vuex"
    
    const store = createStore({ 
      state() {  
        return { 
          count:0
        }
      },
      mutations: { 
        addCount(state, date) {  
          state.count+=date
        }
      },
      actions: { 
        addAction({  commit },date){  
          commit('addCount',date)
        }
      },
      modules: { },
      getters: { 
        getCount(state){ 
          return `我是前端仔，在测试getters方法,获取count的值是：${ state.count}`
        }
      }
    })
    export default store

## main导入 ##

main.js 导入创建的store

import store from './store'
    createApp(App).use(store).mount('#app')

## 组件使用 ##

home.vue 组件中使用vuex

<template>
      <h1>我是vuex的count值：{ { store.state.count}}</h1>
      <h1>{ { store.getters.getCount}}</h1>
      <el-button @click="handleAddCount">count值+2</el-button>
    </template>

**这里直接使用Vue3的seript setup语法糖**

获取vuex的state的值：store.stat.xxx  
更改vuex的state的值：这里通过dispatch分发，让actions里面的addAction方法去commit提交操作

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 1]  
另外我们在开发模式下，可以使用浏览器插件devtools来查看vuex中state数据的变更

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 2]  
文章来源于公众号：贩卖前端仔  
![在这里插入图片描述][e4ac03b595fe4611ba34cc37988248b5.png_pic_center]

[https_next.vuex.vuejs.org]: https://next.vuex.vuejs.org/
[cddb38fc620442bfb15a110499dda03a.png_pic_center]: /images/20220829/288ad10efbc6408c93e7550fe29c66ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/38bf54ff49fd490a93414c84f5509db4.png
[c0a325078410448eb70e1b9182ddfa2a.png_pic_center]: /images/20220829/a2527980a70c408598b5a50aa5d81949.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/eff5c14822a24d18a61b37192ee3134d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220829/397c4a029fd5436cbb47f26e51db2c48.png
[e4ac03b595fe4611ba34cc37988248b5.png_pic_center]: /images/20220829/5e66f838aa224df78e01627a75197735.png