vue3中使用pinia(大菠萝)状态管理仓库的项目实践

npm install pinia

yarn add pinia

import { defineStore } from 'pinia'
export const useMyStore = defineStore('myStore', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

import { useMyStore } from './store'
export default {
  setup() {
    const myStore = useMyStore()
    return {
      count: myStore.count,
      increment: myStore.increment,
    }
  },
}

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

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
  }),
  actions: {
    setName(name) {
      this.name = name
    },
  },
})

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import { useUserStore } from './store/user'
const app = createApp(App)
app.use(createPinia())
app.provide('userStore', useUserStore())
app.mount('#app')

import { useUserStore } from '../store/user'
export default {
  setup() {
    const userStore = useUserStore()
    return {
      name: userStore.name,
      setName: userStore.setName,
    }
  },
}

import { useUserStore } from '../store/user'
export default {
  setup() {
    const userStore = useUserStore()
    const handleNameChange = (name) => {
      userStore.setName(name)
    }
    return {
      name: userStore.name,
      handleNameChange,
    }
  },
}

import { useUserStore } from '../store/user'
export default {
  setup() {
    const userStore = useUserStore()
    return {
      name: userStore.name,
    }
  },
}

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => ({
    firstName: 'John',
    lastName: 'Doe',
  }),
  getters: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    },
  },
})

<template>
  <div>{{ fullName }}</div>
</template>
<script>
import { useUserStore } from '../store/user'
export default {
  setup() {
    const userStore = useUserStore()
    return {
      fullName: userStore.fullName,
    }
  },
}
</script>

//定义组合式API仓库
import { defineStore } from "pinia";
import { ref, computed,watch} from 'vue';
//创建小仓库
let useTodoStore = defineStore('todo', () => {
    let todos = ref([{ id: 1, title: '吃饭' }, { id: 2, title: '睡觉' }, { id: 3, title: '打豆豆' }]);
    let arr = ref([1,2,3,4,5]);
    const total = computed(() => {
        return arr.value.reduce((prev, next) => {
            return prev + next;
        }, 0)
    })
    //务必要返回一个对象:属性与方法可以提供给组件使用
    return {
        todos,
        arr,
        total,
        updateTodo() {
            todos.value.push({ id: 4, title: '组合式API方法' });
        }
    }
});
export default useTodoStore;