Pinia

Pinia

一、搭建pinia环境

1.安装pinia

npm i pinia

2.在main.ts配置pinia

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
//第一步引入pinia
import {createPinia} from 'pinia';

const app = createApp(App);
//第二步创建pinia ps:最好在App创建之后
const pinia = createPinia();
//第三步安装pinia
app.use(pinia);
app.mount('#app')

3.保存数据

在src文件下创建一个store文件夹放置pinia的数据文件

创建一个count.ts文件保存count文件的数据

import { defineStore } from "pinia";

export const useCountStore = defineStore('count',{
    //真正存储数据的地方
    state(){
        return {
            sum:6
        }
    }
});

4.获取count数据

<template>
  <div class="count">
    <h2>当前求和为 {{ countStore.sum }}</h2>
  </div>
</template>
<script>
import {ref} from 'vue'
import { useCountStore } from '@/store/count'
export default {
  setup(){
    const countStore = useCountStore();
    return{
        countStore
    }
  }
}
</script>

5.获取talk数据

<template>
  <div class="talk">
        <ul>
            <li v-for="(item,index) in talkStore.talkList" :key="item.id">{{item.title}}</li>
        </ul>
  </div>
</template>

<script lang="ts">
import { useTalkStore } from '@/store/talk'
export default {
    setup(){
        const talkStore = useTalkStore();
        return{
            talkStore
        }
    }
}
</script>

6.修改数据

<template>
  <div class="count">
    <h2>当前求和为 {{ countStore.sum }}</h2>
    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="sub">减</button>
  </div>
</template>

<script>
import {ref} from 'vue'
import { useCountStore } from '@/store/count'
export default {
  setup(){
    const countStore = useCountStore();
    let n = ref(1);
    //直接修改pinia
    let add = function(){
      countStore.sum += n.value;
    }

    let sub = function(){
      countStore.sum -= n.value;
    }
	//第二种修改方式，可批量修改
     /*let sub = function(){
     // countStore.$patch({
       // sum:sum-n.value,
        //a:'sds',
        //b:'sdad'
      })*/ 
    }
    return{
        sum,n,add,sub,countStore
    }
  }
}
</script>

通过actions修改

import { defineStore } from "pinia";
export const useCountStore = defineStore('count',{
    //
    actions:{
        desc(value){
            console.log("@@@@@");
            this.sum-=value
        }
    },
    //真正存储数据的地方
    state(){
        return {
            sum:6
        }
    }
});

<template>
  <div class="count">
    <h2>当前求和为 {{ countStore.sum }}</h2>
    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="sub">减</button>
  </div>
</template>

<script>
import {ref} from 'vue'
import { useCountStore } from '@/store/count'
export default {
  setup(){
    const countStore = useCountStore();
    let sum = countStore.sum;
    let n = ref(1);
    //直接修改pinia
    let add = function(){
      countStore.sum += n.value;
    }
    //第二种修改方式，可批量修改
    let sub = function(){
      countStore.desc(n.value) 
    }
    return{
        sum,n,add,sub,countStore
    }
  }
}
</script>

getters

import { defineStore } from "pinia";

export const useCountStore = defineStore('count',{
    //
    actions:{
        desc(value){
            console.log("@@@@@");
           this.sum-=value
        }
    },
    //真正存储数据的地方
    state(){
        return {
            sum:6
        }
    },
    getters:{
        bigSum(state){
            return state.sum*100
        },
        update(state){
            return this.sum*100
        }
    }
});

<template>
  <div class="count">
    <h2>当前和为 {{ countStore.bigSum }}</h2>
  </div>
</template>

<script>
import {ref} from 'vue'
import { useCountStore } from '@/store/count'
export default {
  setup(){
    const countStore = useCountStore();
	
    return{
        countStore
    }
  }
}
</script>