vue.js3:用pinia做状态管理(vue@3.2.37 / pinia@2.0.16)

一，安装pinia库:

1,官网:

https://pinia.vuejs.org/

代码地址:

https://github.com/vuejs/pinia

2,安装:

liuhongdi@lhdpc:/data/vue/child$ npm -S install pinia
 
added 2 packages in 3s

3,查看已安装库的版本:

liuhongdi@lhdpc:/data/vue/child$ npm list pinia
child@0.1.0 /data/vue/child
└── pinia@2.0.16

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码：

1,main.js中引入

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

const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')

2,App.vue中保存屏幕宽高

<template>
  <router-view />
</template>
<script>
import {onMounted} from "vue";
import {useScreenStore} from "@/store/screen";
export default {
  name: 'App',
  setup() {
     onMounted(()=>{

       let screen = useScreenStore();
       screen.setWidth(document.documentElement.clientWidth);
       screen.setHeight(document.documentElement.clientHeight);

       //窗口改变大小时
       window.onresize = () => {
         //set store中的值
         let screen = useScreenStore();
         screen.setWidth(document.documentElement.clientWidth);
         screen.setHeight(document.documentElement.clientHeight);

       }
     })
  }
}
</script>

<style>
html,body{
  margin:0;
  padding:0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
</style>

3,Home.vue

<template>
<div>
  <router-link :to="{ path: '/code/code', query: { codeId: 123 }}">
    去code页面
  </router-link><br/>
  name:{{name}}<br/>
  age:{{age}}<br/>
  getter name:{{User.getName}}<br/>
  <button @click="change">change</button><br/>
  <button @click="reset">reset</button><br/>
</div>
</template>

<script>
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import {} from 'vue'
export default {
  name: "HomePage",
  setup() {
    // 获取store中的值
    const User = useUserStore();
    // 通过pinia自带的方法，转换成ref，就是响应式的了
    let {name,age} = storeToRefs(User);
    //修改
    const change = ()=> {
      User.$patch({
        name: '擎天柱',
        age: 19
      })
    }
    //重置
    const reset = ()=> {
      User.$reset()
    }
    return {
      User,
       name,
       age,
        change,
        reset,
    }
  }
}
</script>

<style scoped>
</style>

4,store/index.js

import {defineStore} from 'pinia'

export const useUserStore = defineStore("USER",{
    state() {
        return {
            name: '威震天',
            age: 18,
        }
    },
    // 和vuex一样
    getters: {
        getName(){
            if (this.name === '威震天') {
                return this.name += "-霸天虎"
            } else {
                return this.name += "-汽车人"
            }

        },
    },
    // 和vuex一样
    actions: {
        setName(name) {
            console.log("set name:");
            this.name = name;
        },
        setAge() {
            this.age--
        }
    }
})

5,store/screen.js

import {defineStore} from 'pinia'

export const useScreenStore = defineStore("Screen",{
    state() {
        return {
             0,
            height: 0,
        }
    },
    // 和vuex一样
    getters: {
    },
    // 和vuex一样
    actions: {
        setWidth(width) {
            console.log("set ");
            this.width = width;
        },
        setHeight(height) {
            this.height = height;
        },
    }
})

6,Code.vue

<template>
  <div>
    <router-link :to="{ path: '/home/home', query: { codeId: 123 }}">
      去home页面
    </router-link><br/>
    {{width}}<br/>
    height:{{height}}<br/>
  </div>
</template>

<script>
import {useScreenStore} from "@/store/screen";
import {storeToRefs} from "pinia";

export default {
  name: "CodePage",
  setup() {
    // 获取store中的值
    const screen = useScreenStore();
    // 通过pinia自带的方法，转换成ref，就是响应式的了
    let {width,height} = storeToRefs(screen)

    return {
       width,
       height,
    }
  }
}
</script>

<style scoped>

</style>

三，测试效果

 

四，查看vue框架的版本:

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
├─┬ pinia@2.0.16
│ ├─┬ vue-demi@0.13.5
│ │ └── vue@3.2.37 deduped
│ └── vue@3.2.37 deduped
├─┬ vue-router@4.1.2
│ └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped