vue3中vuex与pinia初识

众所周知的是vue2.x中状态管理工具用的是vuex，而vue3中也是可以使用vuex的，且用vue cli 创建的vue3项目里面也是可选vuex是否安装的，或者项目初始化时不安装，如果有需要再进行安装

使用 npm包管理工具是这样的：

 npm install vuex@next --save

而用yarn的话是这样的：

yarn add vuex@next --save

下载完依赖包之后就需要创建vuex

首先是从main.js中引入并挂载

import store from './store'
const app = createApp(App)
app.use(store)

然后在src文件夹下创建store文件并创建index.js，并且在index.js中创建一个vuex

import { createStore } from 'vuex'
import persist from 'vuex-persistedstate'
export default createStore({
  state: {   // 状态，也就是变量
    index:0
  },
  mutations: {  //  改变状态,也就是方法,同步的
  },
  actions: {  // 异步改变方法
  },
 getters:{  // 相当于计算属性
    
  },
  modules: {  // 模块化
  }
})

当然如果你要是用vue cli 直接创建就可以省略以上步骤，vue3中提倡即用即引，如果要在页面使用就要先引入

而且如果项目比较大的情况下，肯定不能把所有要管理的状态都写在一个文件里面，这时候就要做一些模块化的处理

比如创建一个 card.js

export default {
    namespaced: true,
    state: {
        num: 0
    },
    mutations: {

    },
    actions: {},
    getters: {}
}

然后在导入模块

import card from './card'
modules: {
    card
  },

使用的话跟上面差不多

import { onMounted, onBeforeMount } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    console.log(store.state.card.num);
  },
};

这是vuex的简单应用

pinia:

使用vue官方创建工具会提示你是否使用pinia，pinia就是vue3中推荐使用的状态管理工具

pinia的安装你如果用   npm init vue@3 的话会有是否安装

或者你可以自己下载

yarn add pinia
// npm
npm install pinia

在main.js 中引入

import { createApp } from 'vue'
import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia();
app.use(pinia)

同样在src文件夹下创建文件并且创建一个js文件

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    num:0
  }),
  getters: {

  },
  actions: {
    handleBtn(){
        this.num++
  }
})

从这里可以看到差别 vuex有五个核心，pinia只有三个 ，一个是存放状态的也就是变量，一个是计算属性，一个是方法，而且pinia的用法尤为简单

import { useCounterStore } from "@/stores/counter";
const pinia = useCounterStore();
console.log(pinia.num)

如果是方法的话

   点击改变

而且pinia没有模块化，你可以创建很多js文件,一个文件就是一个模块，用哪个文件就引入哪个文件就可以，每个文件都是单独的模块，可以说是相当方便

而且文档中的话，中文文档还没更新有pinia，英文的文档是有的，中文的生态系统里面是vuex，英文就是pinia，

英文文档：Vue.js - The Progressive JavaScript Framework | Vue.js

pinia官网：Pinia

而且github仓库上面，vue3中核心位置也已经没有了vuex，而是换成了pinia