pinia-状态管理使用

安装及引用

// 安装 pinia
npm install pinia -S

// 在main.js挂载
import {createPinia} from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia).mount("#app");

创建store

1. 在src下创建piniaStore/storeA.js

import { defineStore } from "pinia";

export const storeA = defineStore("storeA", {
  state: () => {
    return {
      piniaMsg: "hello pinia",
      piniaName: '小七',
      piniaAge: 25
    };
  },
  getters: {},
  actions: {
    // edit_name(){

    // }
  },
});

2. 在app.vue中使用

<template>
  <div class="Box">
    <div class="title">
      首页
    </div>
    {{piniaStore_storeA.piniaMsg}}
  </div>
</template>

<script>
import { storeA } from '../../piniaStore/storeA'
export default {
  name: 'homeIndexPage',
  setup () {
    let piniaStore_storeA = storeA()
    return {
      piniaStore_storeA
    }
  }
}
</script>

3. 将数据store挂载到公共方法上（第二种用法）

a. 挂载

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'
import router from './/router/index'
import { createPinia } from 'pinia'
import { storeA } from './piniaStore/storeA'
const pinia = createPinia()

// 创建appvue
const app = createApp(App)
app.use(pinia)
app.config.globalProperties.$Fn = storeA()
app.use(store)
app.use(router)
app.mount('#app')

b. 在app.vue中使用

<template>
  <div>
    {{proxy.$piniaStor_storeA.piniaMsg}}
  </div>
</template>

<script>
import { getCurrentInstance } from '@vue/runtime-core'
import { storeA } from '../../piniaStore/storeA'
export default {
  name: 'homeIndexPage',
  setup () {
    let piniaStore_storeA = storeA()
    const { proxy } = getCurrentInstance()
    return {
      piniaStore_storeA,
      proxy
    }
  }
}
</script>

修改状态

直接修改

<template>
  <div class="Box">
    年龄：{{proxy.$piniaStor_storeA.piniaAge}}

  </div>
  <el-button @click="fn_reduce"
             class="buttonCss">减少</el-button>
  <el-button @click="fn_add"
             style="margin:20px"
             class="buttonCss">增多</el-button>
</template>

<script>
import { getCurrentInstance } from '@vue/runtime-core'
import { storeA } from '../../piniaStore/storeA'
export default {
  name: 'homeIndexPage',
  setup () {
    let piniaStore_storeA = storeA()
    const { proxy } = getCurrentInstance()

    let fn_add = () => {
      piniaStore_storeA.piniaAge++
    }
    let fn_reduce = () => {
      proxy.$piniaStor_storeA.piniaAge--
    }
    return {
      piniaStore_storeA,
      proxy,
      fn_add,
      fn_reduce
    }
  }
}
</script>

$patch修改

简介：$patch:可以进行多个状态修改也可以单个状态修改

1. 普通修改

piniaStore_storeA.$patch({
        piniaAge: 15,
        piniaName: 'danguner'
})

2. 函数方式修改

 piniaStore_storeA.$patch((state) => {
        state.piniaAge = 25
        state.piniaName = '小七'
})

在actions中进行修改

注册action方法

import { defineStore } from "pinia";

export const storeA = defineStore("storeA", {
  state: () => {
    return {
      piniaMsg: "hello pinia",
      piniaName: '小七',
      piniaAge: 25
    };
  },
  getters: {},
  actions: {
    edit_name (data) {
      this.piniaName = data
    },
  },
});

在app.vue中使用

<template>
  <div class="Box">
    年龄：{{proxy.$piniaStor_storeA.piniaAge}}
    姓名：{{proxy.$piniaStor_storeA.piniaName}}

  </div>
  <el-button @click="fn_changeName('danguner')"
    class="buttonCss">danguner</el-button>
  <el-button @click="fn_changeName('小七')"
    style="margin:20px"
    class="buttonCss">小七</el-button>
</template>

<script>
  import { getCurrentInstance } from '@vue/runtime-core'
  import { storeA } from '../../piniaStore/storeA'
  export default {
    name: 'homeIndexPage',
    setup () {
      let piniaStore_storeA = storeA()
      const { proxy } = getCurrentInstance()

      let fn_changeName = (data) => {
        console.log(data, 'data')
        piniaStore_storeA.edit_name(data)
      }

      return {
        piniaStore_storeA,
        proxy,
        fn_changeName
      }
    }
  }
</script>

重置state–$reset（）

Pinia可以使用$reset将状态重置为初始值

import { storeA } from '@/piniaStore/storeA' 
let piniaStoreA = storeA()
piniaStoreA.$reset()

getters

注册

import { defineStore } from "pinia";

export const storeA = defineStore("storeA", {
  state: () => {
    return {
      piniaMsg: "hello pinia",
      piniaName: '小七',
      
      piniaAge: 25
    };
  },
  getters: {
    Introduction_data () {
      return `姓名:${this.piniaName}--->年龄${this.piniaAge}`
    }
  },
  actions: {
    edit_name (data) {
      this.piniaAge = data == 'danguner' ? 18 : 25
      this.piniaName = data
    },
  },
});

在app.vue页面使用

<template>
  <div class="Box">
    {{proxy.$piniaStor_storeA.Introduction_data}}

  </div>
  <el-button @click="fn_changeName('danguner')"
             class="buttonCss">danguner</el-button>
  <el-button @click="fn_changeName('小七')"
             style="margin:20px"
             class="buttonCss">小七</el-button>
</template>

<script>
import { getCurrentInstance } from '@vue/runtime-core'
import { storeA } from '../../piniaStore/storeA'
export default {
  name: 'homeIndexPage',
  setup () {
    let piniaStore_storeA = storeA()
    const { proxy } = getCurrentInstance()

    let fn_changeName = (data) => {
      console.log(data, 'data')
      piniaStore_storeA.edit_name(data)
    }

    return {
      piniaStore_storeA,
      proxy,
      fn_changeName
    }
  }
}
</script>

<style lang="less" scoped>
@color: #0982c1;
.text3d(@color) {
  color: @color;
  text-shadow: 1px 1px 0px darken(@color, 5%), 2px 2px 0px darken(@color, 10%),
    3px 3px 0px darken(@color, 15%), 4px 4px 0px darken(@color, 20%),
    4px 4px 2px #000;
}
@keyframes xz {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}
.Box {
  background: aqua;
  width: 100%;
  height: 80vh;
  text-align: center;
  line-height: 80vh;
  font-size: 50px;
  .title {
    animation: xz 5s linear infinite;
  }
  .text3d(#0982c1);
}
.buttonCss {
  cursor: pointer;
  padding: 0.3125rem;
  border: 0.0625rem solid blue;
  box-sizing: border-box;
  &:hover {
    color: aquamarine;
  }
}
</style>