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

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

VueX

核心概念

1、Vuex 是什么？

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

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

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

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

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

4、Vuex 中的主要核心：

 State
 Mutation
 Action
 Getter

官方图片：

---

基本使用

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
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，未雨绸缪总是不错的。