初识vue状态管理机制（vuex、pinia）

谁借莪１个温暖的怀抱￠ 2023-10-02 09:46 28阅读 0赞

**前言备注：以下示例使用的相关版本为：vue3，vuex4，pinia2.0^**

#### 文章目录 ####

*  VueX
 *   *   *  核心概念
         *   *  1、Vuex 是什么？
             *  2、使用 Vuex 统一管理状态的好处
             *  3、什么样的数据适合存储到 Vuex 中
             *  4、Vuex 中的主要核心：
         *  基本使用
         *   *  1、安装vuex依赖包
             *  2、创建 store 对象
             *  3、将 store 对象挂载到 vue 实例中
             *  4、组件中使用vuex
 *  pinia
 *   *   *   *  简介
             *  安装
             *  全局挂载
             *  基本使用
             *  组件内使用

## VueX ##

#### 核心概念 ####

##### 1、Vuex 是什么？ #####

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

##### 2、使用 Vuex 统一管理状态的好处 #####

① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护  
② 能够高效地实现组件之间的数据共享，提高开发效率  
③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

##### 3、什么样的数据适合存储到 Vuex 中 #####

一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中

##### 4、Vuex 中的主要核心： #####

** State  
 Mutation  
 Action  
 Getter**

官方图片：

![在这里插入图片描述][c412a3c082264605a895a5cfe806a4e5.png]

--------------------

#### 基本使用 ####

##### 1、安装vuex依赖包 #####

npm install vuex --save

##### 2、创建 store 对象 #####

import {
        
      createStore
    } from 'vuex';
    export default createStore({
        
      state: {
        
        isCount: false //
      },
      getters: {
        
    
      },
      mutations: {
        
        count(state) {
        
          state.isCount = true;
        },
        uncount(state) {
        
          state.isCount = false;
        },
      },
      actions: {
        
        count({
         
          commit
        }) {
        
          setTimeout(() => {
        
            commit('count')
            alert("考虑完毕，可以加了")
          }, 3000)
        }
      },
      modules: {
        },
    })

##### 3、将 store 对象挂载到 vue 实例中 #####

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

##### 4、组件中使用vuex #####

<template>
      <div>
        <h1>vuex</h1>
        <a-button type="button" @click="count">让加</a-button>
        <a-button type="button" @click="uncount">不让加</a-button>
        <a-button type="button" @click="synccount">考虑下再加</a-button>
      </div>
    </template>
    <script setup>
    import {
         useStore } from 'vuex';
    const store = useStore();
    const count = () => {
        
      store.commit("count");//使用mutations状态修改
    }
    const synccount = () => {
        
      store.dispatch("count")//使用action异步修改状态
    }
    const uncount = () => {
        
      store.commit("uncount")
    }
    </script>
    <style lang='less' scoped>
    button {
        
      margin: 30px;
    }
    </style>

--------------------

## pinia ##

##### 简介 #####

pinia官方地址：[https://pinia.vuejs.org/zh/introduction.html][https_pinia.vuejs.org_zh_introduction.html]  
Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。  
不同于vuex状态管理机制，pinia的写法能更好的兼容typescript，并且直接在组件中使用，写法上更趋近于vue3的写法。

##### 安装 #####

npm install pinia --save

##### 全局挂载 #####

import {
        
      createApp
    } from 'vue'
    import {
         createPinia } from 'pinia';
    import App from './App.vue'
    
    createApp(App).use(createPinia()).mount('#app')

##### 基本使用 #####

和vuex一样的，也需要先创建store并且导出

import {
        defineStore} from "pinia";
    import {
        ref} from "vue";
    export const useTotalerStore = defineStore('totaler', () => {
        
      const total = ref(0);
      const list = ref([{
        
          name: '张三',
          age: 12
        },
        {
        
          name: '李四',
          age: 20
        },
      ])
    
      function increment(value = 3) {
        
        total.value += value
      }
      return {
        
        total,
        increment,
        list
      }
    })

##### 组件内使用 #####

<template>
      <div>
        <h1>pinia</h1>
        <div style="padding:10px">
          <a-input style="width:30%;margin:10px" placeholder="请输入姓名" v-model:value="name"></a-input>
          <a-input style="width:30%;margin:10px" placeholder="请输入年龄" v-model:value="age"></a-input>
          <a-button @click="addData()">添加人员数据</a-button>
        </div>
        <a-button @click="totalStore.increment(10)">加总数</a-button>
        <a-button @click="editData()">修改人员数据</a-button>
    
    
      </div>
    </template>
    <script setup>
    import {
         ref } from 'vue';
    import {
         useTotalerStore } from '../store/index.js'
    const totalStore = useTotalerStore();
    const editData = () => {
        
      totalStore.$state = {
        
        total: 100,
        list: [
          {
         name: '王麻子', age: 23 },
          {
         name: '赵武', age: 40 },
        ]
      }
    }
    console.log(totalStore)
    let name = ref();
    let age = ref()
    const addData = () => {
        
      console.log(name.value, age.value);
      totalStore.list.push({
         name: name.value, age: age.value })
    }
    </script>
    <style lang='less' scoped>
    button {
        
      margin: 20px;
    }
    </style>

pinia目前自己也使用了不多，这里只是用代码介绍了一些基本用法，如果感兴趣的可以去官方继续深入学习一下。  
但是pinia也是学习vue的必经之路，目前vue的状态管理大部分使用的都是vuex，但是pinia在后面必将取代vuex，未雨绸缪总是不错的。

[c412a3c082264605a895a5cfe806a4e5.png]: https://img-blog.csdnimg.cn/c412a3c082264605a895a5cfe806a4e5.png
[https_pinia.vuejs.org_zh_introduction.html]: https://pinia.vuejs.org/zh/introduction.html