首页 > 其他分享> 文章详细

2022.07.13 pinia的简单使用

2022-07-13 19:33:48 阅读：198 来源： 互联网

标签：13 const name getters state pinia 2022.07 useStore store

使用前说明：

　　当前demo使用了vue3 + vite + typescript + pinia搭建的简单项目，主要介绍了在单文件组件（sfc）基础上使用pinia的用法，懒得看api的兄弟们，来这瞅瞅直接用。

安装：

　　yarn add pinia (yarn包管理器)

　　npm install pinia (npm包管理器)

介绍：

　　其实就是一个全局状态管理的对象，相对vuex来讲，它仅有三个概念state、getters、actions，可以假设为组件中的数据源、计算和方法。

使用：

1、在整个项目中引入pinia

import { createPinia } from 'pinia'

app.use(createPinia())

　2、定义store对象

import { defineStore } from 'pinia'

// 仓库名称在命名时推荐使用use开头的名称，当然命名不受限制，只要你开心啥都行。
// defineStore函数接受的第一个参数是定义该仓库的id,具有唯一性
export const useStore = defineStore('main', {
  // other options...
})

　3、使用store对象

// 假设定义store对象的时候，该对象的文件路径为src/store/index.ts，并且src/已经在vite.config.ts和tsconfig.json文件中配置为@

<script setup lang="ts">
// 引入定义store对象的文件
import { useStore } from '@/store'

// 这个时候会返回整个store实例以在模板中使用它，这个时候就可以在store上直接访问state、getters、actions中定义的任何属性和方法
// 推荐在不同的文件中定义不同的store
const store = useStore()
</script>

4、state，即数据源

定义state对象

// 定义state的形式比较多，我选择行数最少的
export const useStore = defineStore('main', {　　　　　　
    // 第一种
    state () {
        return {
          name: 'hello'
            // 需要保存的数据源
        }
    }
    // 第二种（经常使用的）
    state: () => ({
　　       name: 'hello'
           // 需要保存的数据源
    }),
    // 第三种
    state: () => {
        return {
           name: 'hello'
           // 需要保存的数据源
        }
    },
})

state对象的获取

<script setup lang="ts">
import { useStore } from '@/store'
const store = useStore();

// 获取state中的对象,直接取值即可，在模板中进行渲染，切忌使用解构赋值，导致仓库无法响应式更新对象
const name = store.name
</script>

state对象的修改

direct，即直接修改

<script setup lang="ts">
import { useStore } from '@/store'
const store = useStore();

// 直接修改
store.name = 'world'
</script>

patch object，即通过$patch接受对象的方式修改

<script setup lang="ts">
import { useStore } from '@/store'
const store = useStore();

// store提供$patch方法，接受对象作为参数更新store对象
store.$patch({
    name: 'world',
})
</script>

patch function，即通过$patch接受函数的方式修改　

<script setup lang="ts">
import { useStore } from '@/store'
const store = useStore();

// store提供$patch方法，接收函数作为参数更新store对象，接收的函数形参第一个默认为数据源state对象
store.$patch((state: any) => {
    state.name = 'world';
 })
</script>

整体替换

<script setup lang="ts">
import { useStore } from '@/store'
const store = useStore();

// 全部替换store对象
store.$state = { counter: 666, name: 'world' }
</script>

订阅状态

<script setup lang="ts">
import { useStore } from '@/store'
const store = useStore();

// 订阅,只会在 patches 之后触发一次
// 默认情况下，state subscriptions 绑定到添加它们的组件（如果 store 位于组件的 setup() 中）。 意思是，当组件被卸载时，它们将被自动删除。 如果要在卸载组件后保留它们，请将 { detached: true } 作为第二个参数传递给 detach 当前组件的 state subscription：
store.$subscribe((mutation, state) => {
  // import { MutationType } from 'pinia'
  mutation.type // 'direct' | 'patch object' | 'patch function'
  // 与 store.$id 相同
  mutation.storeId // 'main'
  // 仅适用于 mutation.type === 'patch object'
  mutation.payload // 补丁对象传递给 to store.$patch()

  // 每当它发生变化时，将整个状态持久化到本地存储
  localStorage.setItem('store', JSON.stringify(state))
}, { detached: true })
</script>

5、getters

定义getters对象

export const useSomeStore = defineStore('second', {
    state: () => ({
        number: 2
     }),
    getters: {
       // getters下的所有方法默认第一个参数为数据源，主要是依赖state对象做一些计算操作
        doubleNumber(state) {
            return state.number * 2
        },
        // 该方法依赖getters下的doubleNumber方法，使用this指向当前store实例对象
        fourNumber(): number {
            return this.doubleNumber * 2
        },
       // 在调用getters下该方法时可以传递自定义参数信息，如下的num形参
        customNumber(state) {
            return (num: number) => state.number * num
        },
    }
})

使用getters对象下的方法

<script setup lang="ts">
import { useSomeStore } from '@/store'

const someStore = useSomeStore();
// 有参数时
someStore.customNumber(2)
// 无参数时
someStore.doubleNumber()
someStore.fourNumber()
</script>

6、actions

定义actions对象

export const useSomeStore = defineStore('second', {
    state: () => ({
        number: 2
     }),
    getters: {
       // getters下的所有方法默认第一个参数为数据源，主要是依赖state对象做一些计算操作
        doubleNumber(state) {
            return state.number * 2
        },
        // 该方法依赖getters下的doubleNumber方法，使用this指向当前store实例对象
        fourNumber(): number {
            return this.doubleNumber * 2
        },
       // 在调用getters下该方法时可以传递自定义参数信息，如下的num形参
        customNumber(state) {
            return (num: number) => state.number * num
        },
    }，
    // 最主要的是actions 可以是异步的
     actions: {
        addNumber() {
            this.number++
        }
    }
})

使用actions对象下的方法

<script setup lang="ts">
import { useSomeStore } from '@/store'

const someStore = useSomeStore();
// 使用
someStore.addNumber()
</script>

订阅actions

// 这个直接看官网描述，哈哈，写的疲惫了
const unsubscribe = someStore.$onAction(
  ({
    name, // action 的名字
    store, // store 实例
    args, // 调用这个 action 的参数
    after, // 在这个 action 执行完毕之后，执行这个函数
    one rror, // 在这个 action 抛出异常的时候，执行这个函数
  }) => {
    // 记录开始的时间变量
    const startTime = Date.now()
    // 这将在 `store` 上的操作执行之前触发
    console.log(`Start "${name}" with params [${args.join(', ')}].`)

    // 如果 action 成功并且完全运行后，after 将触发。
    // 它将等待任何返回的 promise
    after((result) => {
      console.log(
        `Finished "${name}" after ${
          Date.now() - startTime
        }ms.\nResult: ${result}.`
      )
    })

    // 如果 action 抛出或返回 Promise.reject ，onError 将触发
    one rror((error) => {
      console.warn(
        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
      )
    })
  }
)

// 手动移除订阅
unsubscribe()

总结：

上面的代码有些是手敲上去的，直接复制粘贴可能会报错哈，小心小心！！！

标签：13,const,name,getters,state,pinia,2022.07,useStore,store
来源： https://www.cnblogs.com/niupeinan/p/16475247.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2022.07.13 pinia的简单使用

使用前说明：

安装：

介绍：

使用：

1、在整个项目中引入pinia

2、定义store对象

3、使用store对象

4、state，即数据源

5、getters

6、actions

总结：

　2、定义store对象

　3、使用store对象