Vue2中使用Pinia

Vue2中使用Pinia

1.初始化配置

# main.js

import Vue from 'vue'
import App from './App.vue'
import pinia from './stores/index'
import { PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)

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

2.模块化开发

新建stores文件，建立入口文件index.js

# index.js

import { createPinia } from 'pinia'
export * from './nodules/useUserStore'


const pinia = createPinia()

export default pinia

stores文件下新建nodules模块文件(有点类似dva中的model.ts)

在nodules中新建useUserStore.js文件

# useUserStore.js

import { defineStore } from 'pinia'
export const useUserStore = defineStore('store', {
    state: () => {
        return {
            tagslist: [{
                title: '首页',
                key: 'home',
                closable: false
            }, {
                title: '用户中心',
                key: 'home',
                closable: false
            }, {
                title: '讨论',
                key: 'home',
                closable: false
            }],
        }
    },
    actions: {
        changeTagList(obj) {
            console.log(this.tagslist);
            if (!this.tagslist.some(ele => ele.key === obj.key)) {
                const objs = {
                    ...obj,
                    closable: false
                }
                console.log(this.tagslist.some(ele => ele.key === obj.key));
                this.tagslist.push(objs)
            }
        },
        deleteTagList(k) {
            const key = this.tagslist.findIndex(item => {
                return item.key == k
            })
            this.tagslist.splice(key, 1)
        },
    }
})

// pinia不需要mutation，只需要使用action来改变状态

3.使用