(syntax)pinia

pinia

piniaApi

pinia vs vuex

• 抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库
• 不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化
• TS支持
• 代码自动分割
• 小 1K

store 仓库

• state 数据
  • 定义 export const mainStore = defineStore('main',{ state:{} })
  • 使用
    • const store = mainStore()
    • const { name } = storeToRefs(store)
    • 组件 store.name name
  • 修改
    • store.属性名 单个数据修改
    • store.$path多个数据修改（类似辅助函数）
      • $path((state)=>{ }) + $path({})
• getters 计算
  • 定义 export const mainStore = definStore('main',{ getters:{} })
  • 使用 导入 + 文件名() + store.getters名
• actions 方法
  • 定义 export const mainStore = definStore('main',{ actions:{} })
  • 使用 导入 + 文件名() + store.action方法()
• store 文件分割

// vue-cli vue create
vue create <project-name>
// vite  xxx create vite
npm/yarn/pnpm create vite my-vue-app --template vue   
// xxx create vite 项目名  --temlate vue
yarn add pinia
npm i pinia
// vue2
npm i @vue/composition-api
// vue-cli
vue add vue-cli-plugin-pinia

// vue3
// main.js
// vuex createStore
import App from './App.vue'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
const app = creaetApp(App)
const pinia = createPinia()
app.use(pinia).mount('#app')

// vue2
// main.js
// vuex new Vue({ store }) // store文件导入
import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  pinia,
})

state数据

• 定义 export const mainStore = defineStore('main',{ state:()=>{} })
• 使用
  • const store = mainStore()
  • const { name } = storeToRefs(store)
• 修改
  • store.属性名 单个数据修改
  • store.$path多个数据修改（类似辅助函数）
    • store.$path((state)=>{ }) + store.$path({})

定义

// pinia main.js
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')

// vuex  stores.js
import { createStore } from 'vuex'
export default createStore({ state:{} })

// pinia stores.js 定义
// 可以添加别名
import { defineStore } from 'pinia'
// 第一个参数唯一名称 
export const mainStore = defineStore('main',{
  state:() => { 
    return{  count:100  }   
  },
  getters:{},
  actions: {
    increment() {
    	this.count++
    },
  },
})

// xxx.vue 使用 setup()
import { mainStore } from '@/stores.js'
export default {
  setup() {
    const store = mainStore()
    store.count++
    store.$patch({ count: store.count + 1 })
    store.increment() 
    const store = useStore()
    return{
      store
    }
  },
}

使用(解构store)

{{ store.count//count }}

// setup
<script setup>
  import { storeToRefs } from 'pinia'
  import { mainStore } from '@/stores.js
  const store = mainStore()
  const { count } = storeToRefs(store) 
</script>  
  
// 响应式调用
import { storeToRefs, } from 'pinia'
export default defineComponent({
  setup(){
    const store = useStore()
    const { name, doubleCount } = storeToRefs(store) // 添加响应式属性
    const { count } = storeToRefs(store) OR const { count } = store ES解构没有响应性
    return{
      name,
      doubleCount
    }
  }
})

修改

• store.属性名 单个数据修改
• store.$path多个数据修改（类似辅助函数）
  • $path((state)=>{ }) + $path({})

// xxx.vue
const add = () => {
  store.count++
}

const plus = () =>{
  store.$path({ 
  	count:store.count + 100,
    msg:'Hello' + store.msg 
  })
}

const del = () =>{
  store.$path((state) => { 
  	state.count = state.count + 100,
    state.msg = state.msg.length > 10? 'true' : 'false' 
  })
}

getters计算

• 定义 export const mainStore = definStore('main',{ getters:{} })
• 使用 导入 + 文件名() + store.getters名

• 与vue的计算属性集合一样 有缓存 值没有改变多次调用同一个

定义

import { defineStore } from 'pinia'

export const mainStore = definStore('main',{
  state:()=>{ 
  	return{
      msg:'Message',
      count:1000
    }
  },
  getters:{
    reduceCount(){
      state.count-- //  this.count--
      console.log('-1')
    }
  }
})

使用

<h1> store.reduceCount </h1>
<h1> store.reduceCount </h1>
<h1> store.reduceCount </h1>

import { mainStore } from './stores.js'
const store = mainStore()
console.log(store)

actions方法

• 定义 export const mainStore = definStore('main',{ actions:{} })
• 使用 store.action方法()

定义

import { defineStore } from 'pinia'

export const mainStore = definStore('main',{
  state:()=>{ 
  	return{
      msg:'Message',
      count:1000
    }
  },
  getters:{},
  actions:{
    addCounter(){
      this.count++
      this.msg = `Hello${this.msg} `+ this.count
    }
  }
})

• 使用

<h1>{{ store.msg }}</h1>
<button @click="actionClickk">Action</button>

<script setup>
	 import { mainStore } from './store.js'
   const store = mainStore()
   // 变更action
   const actionClick = () =>{
     	store.addCounter()
   }
</script>

store仓库

• 分离store文件
  • 使用 导入 + 文件().xxx //

// use.js
import { defineStore } from 'pinia'
export const userStore('user',{
  state:()=>{
    return{
       msg:"Hello Pinia"
    }
  }
})
// store.js
import { userStore } from './use.js'
export const mainStore('main',{
  getters:{
    addYear(){
       // return this.msg + new Date()
       return userStore().msg + new Date()
    }
  }
})