我们在vue2中做状态管理一般都是用的vuex，但自从pinia问世之后，我决定弃vuex从pinia了，不是说vuex不好，只是pinia更优秀，更香。

其实pinia设计的初衷是为了更好地支持vue3，因为vuex在vue3中的表现真的是。。。对吧，你们懂的~ 但是pinia的作者考虑到还有很多像我这样的vue2钉子户，所以对pinia做了对vue2的兼容，这点还是很人性化的，赞一下！

关于pinia的介绍就不多说了，可以自行查阅官方文档

本篇主要就是记录一下pinia在vue2项目中的使用。

安装

npm install pinia
cnpm i pinia @vue/composition-api // 这是vue2需要安装的，vue3不需要

引入

main.js

// 引入pinia
import {createPinia,PiniaVuePlugin} from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()//需要挂载在实例上

new Vue({
  router,
  pinia,
  render: h => h(App)
  
}).$mount('#app')

使用

在src下新建store文件夹（命名自己定），我在store文件夹下建了一个user.js用于存放用户信息

注意：如果直接这样使用的话是会报错的，我们必须要在vue.config.js里配置一下

configureWebpack: { //这个是配置
    module: {
        rules: [
            {
                test: /\.mjs$/,
                include: /node_modules/,
                type: "javascript/auto"
            }
        ]
    }
}

在state里定义了一个userName和telPhone，action里定义了一个修改userName的方法，这样我们就可以进行状态存储了。接下来我们就可以到页面上调用了

这边我用的是mapState和mapActions，另外还有一种方法

大家都知道我们在使用vuex的时候，页面刷新，vuex的值也刷新了，我们对用户信息还需要手动存储到localStorage中，像我这种懒人一般是不乐意的，还好vuex提供了一个持久化插件vuex-persistedstate。同样的，pinia也是有这样的插件的，pinia-plugin-persist

npm install pinia-plugin-persist

main.js引入

store配置

demo地址：github.com/wbjf/vue2-p…

自从有了这个大菠萝~

安装

引入

使用