首页 > 其他分享 >pinia

pinia

时间:2022-12-06 13:45:07浏览次数:38  
标签:const name helloworld state pinia store

pinia的优点
1.vue3、vue2、都支持
2.抛弃了Mutations的操作,只有state、getters和actions
3.不需要嵌套模块,符合vue3的Composition api
4.完整的typescript支持
5.代码更加简洁

挂载pinia
在main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {createPinia} from 'pinia'

import './assets/main.css'

const app = createApp(App)
const pinia=createPinia()
app.use(router)
app.use(pinia)


app.mount('#app')

新建store的仓库

//定义状态容器和数据
//修改容器中的store
//仓库中的action的使用
import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
    state: () => {
        return {
            helloworld:'hello world!'
        }
    },
    getters: {},
    actions: {},
})

在页面中引入store

import {mainStore}from '../store/index.ts'
const store=mainStore()
 <h1>{{store.helloworld}}</h1>

在处理状态的action时,有多种方式
第一种:在引入store页面中,直接给button加上点击事件,直接给store.xxx进行修改

<h1 @click="changtxt">{{store.helloworld}}</h1>

const changtxt=()=>{
        store.helloworld='welcome to pinia'
    }

第二种,在引入store页面中,给button加上点击事件,通过在store.$patch中进行修改

        <h1 @click="changtxt">{{store.helloworld}}</h1>
        <h2 >{{store.name}}{{store.age}}</h2>
    const changtxt=()=>{
        console.log('111');
        store.$patch({
            helloworld:store.helloworld='welcome to pinia',
            name:'刘备',
            age:44
        })
    }

第三种

        const changtxt=()=>{
        store.$patch((state)=>{
            state.helloworld='welcome to pinia';
            state.name='关羽';
            state.age=44
        })
    }

第四种,使用store中的actions中定义的行为

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
    state: () => {
        return {
            helloworld: 'hello world!',
            age: 10,
            name:'jack'
        }
    },
    getters: {},
    actions: {
        changeState() {
            this.age = 100,
            this.name = '赵云',
            this.helloworld='三国'
        }
    },
})
    const changtxt=()=>{
        store.changeState();
    }

getters的使用
用例说明:使用store的getters获取数据,在更改数据之后,还会自动调用getters中的函数

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
    state: () => {
        return {
            helloworld: 'hello world!',
            age: 10,
            name: 'jack',
            phone:'12345678912'
        }
    },
    getters: {
        phoneHidden(state) {
            return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
        }
    },
    actions: {
        changeState() {
            this.age = 100,
            this.name = '赵云',
            this.helloworld='三国'
        }
    },
})
 <h1>{{store.phoneHidden}}</h1>
<button @click="changePhone">改变电话号码</button>
    const changePhone=()=>{
        store.phone='22222222222'
    }

获取其他store的数据
1.通过actions获取

actions: {
        changeState() {
            this.age = 100,
            this.name = '赵云',
            this.helloworld='三国'
        },
        getOtherList() {
            console.log(otherStore().list);
            
        }
    },

2.通过getters获取

    getters: {
        phoneHidden(state) {
            return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
        },
        //获取其他store的getter
        otherGetter(state) {
            return otherStore().name
        }
        
    },

 

标签:const,name,helloworld,state,pinia,store
From: https://www.cnblogs.com/shuchenhao/p/16954991.html

相关文章

  • Vue3+Ts+Vite+Pinia后台管理项目实战
    一、新建有一个文件夹命名cms二、使用VsCode打开cms文件夹,在终端中执行命令npminitvue@latest这一指令将会安装并执行create-vue,它是Vue官方的项目脚手架工具。......
  • NOTE_pinia持久化插件的使用
    E:\song\vue_vue_learn\vite-project\index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><linkrel="icon"type="image/svg+xml"......
  • pinia源码解读三(创建store)
    定义模块这一步很复杂,用几个流程图来梳理一下createOptionsStore方法createSetupStore方法数据流向最后整理下数据的流向变更,对于写pinia插件很有帮助option写法版......
  • pinia源码解读二(定义模块)
    定义模块store.ts文件的defineStore方法判断是option写法还是setup写法isSetupStore=typeofsetup==='function'内部创建useStore函数,并给函数绑定$id属性为用......
  • pinia学习
    1.安装yarnaddpiniaOR使用npmnpminstallpiniapinia是Vue的存储库,允许跨组件/页面共享状态。pinia和vuex的作用一样,充当一个存储数据的作用,存储在pinia的数据允许我......
  • Vue3学习笔记(七)—— 状态管理、Vuex、Pinia
    一、状态管理1.1、什么是状态管理?理论上来说,每一个Vue组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例:<scriptsetup>import{re......
  • [Typescript] 113. Hard - Pinia
    Createatype-levelfunctionwhosetypesissimilarto Pinia library.Youdon'tneedtoimplementfunctionactually,justaddingtypes.OverviewThisfunctio......
  • 手把手,完整的从0搭建vite-vue3-ts项目框架:配置less+svg+pinia+vant+axios
    项目同步git:https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git  为避免赘述,过于基础的点会直接省略或贴图,比如创建文件夹/文件的路径/路由一类配置相......
  • vue3+Ts+Vite+ElementPlus+Axios+Router+Pinia 创建过程以及会出的错误
    第一步保证Node.Js版本为12.0以上打开cmd命令输入node-v看版本目前是最新用18.0就行,下载地址:[https://nodejs.org/en/](https://nodejs.org/en/)安装node.js配环境......
  • pinia修改状态的几种方式
    //1main.current++//2main.$patch({current:22,name:'妹妹'})//3main.$patch(state=>{//state.current++,(state.name='hahF')//})//4main.$stat......