vuex与pinia

pinia

pinia文档

pinia的核心Store、State、Getters、Action

Store

使用defineStore()定义，返回的函数一般命名为use…Store

第一个参数要求是一个独一无二的名字，用来连接store和devtools

第二个参数可接收两类值：setup函数、option对象

import {defineStore} from 'pinia'
export const useTestStore = defineStore('test',{})

Option Store

与Vue选项式API类似，传入一个带有state、actions、getters属性的Option对象

state是store的数据(data)，getters是store的计算属性(computed)，actions是方法(methods)

export const useCounterStore = defineStore('counter', {
  //模块的state有两种写法:
  //1, 对象形式 state:{} 2, 使用函数的形式 state:() => ({})
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Setup Store

与Vue组合式API的setup函数类似，传入一个定义了响应式属性和方法的函数，返回一个带有我们想暴露出去的属性和方法的对象

ref()就是state属性，computed()就是getters属性，function()就是actions

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

使用Store

<script setup>
import { useCounterStore } from '@/stores/counter'
import {storeToRefs} from 'pinia'
// store 是一个用 reactive 包装的对象，这意味着不需要在 getters 后面写 .value
const store = useCounterStore()

//不能直接解构响应式属性，这破坏了响应性
//const {count，double} = store -->err

//作为action的方法可以直接解构
const {increment} = store

//使用storeToRefs()使从store中提取属性时保持响应性
const {count,double} = storeToRefs(store)
</script>

访问state数据

//默认情况下，通过store实例访问state，直接对其进行读写
const store = useStore()
store.count++

访问getter

store.double

actions：可以是异步的

actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // 让表单组件显示错误
        return error
      }
    },
  },
      
//...
//使用时
store.registerUser(...)

持久存储

import { createPinia } from 'pinia'
//要nmp i pinia-plugin-persist
import piniaPluginPersist from 'pinia-plugin-persist'
//集成持久存储插件
const rootStore = createPinia()
rootStore.use(piniaPluginPersist)
//要在main.js中挂载
export default rootStore

export const useUserStore = defineStore('storeUser', {
  ...,
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'user',
        storage: localStorage,
      },
    ],
  },
})

Vuex

vuex文档

vuex五大核心：state、getters、mutations、actions、modules

不能直接改变store中的状态。唯一途径是显式地提交mutation

1.state – 存放状态

2.getters – Vuex的计算属性，对state的状态派生出新的状态

3.mutations – 进行同步操作；修改state的唯一入口

4.actions – 提交mutation，可以异步操作

5.mudules – 将store模块化

核心原理

import {createStore} from 'Vuex'

const store = createStore({
    //状态数据
    state:{
        account:null
    },
    //操作状态数据的方法
    // 同步操作
    mutations:{
        saveAccount(state,value){
            state.account = value
        }
    },
    //提供组件操作mutations的方法
    // 可异步操作
    actions:{
        //{commit} -->解构
        save({commit},value){
            commit('saveAccount',value)
        }
    },
    //获取值
    getters:{
        num:state =>state.account
    }
})

export default store

使用module模块

import { createStore } from 'vuex'
import { count } from './modules/user'

const store = createStore({
    modules: {
        count,
    },
})
//要在main.js中挂载
export default store

export const count = {
    namespaced: true,//命名空间
    //模块的state有两种写法:
    //1, 对象形式 state:{} 2, 使用函数的形式 state:() => ({})
    state: {
        count: 0,
    },
    mutations: {
        PLUS(state, value) {
            state.count++
        },
    },
    actions: {
        plus({ commit }) {
            commit('PLUS')
        },
    },
    getters: {
        data: state => state.account,
    },
}

持久存储

//要 npm i vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
    ...,
    //持久存储
    plugins:[
  	createPersistedstate({
  		key:'user',
  		storage:window.localStorage,
  		path:['count']//可指定存储哪个模块
  	})
  ]
})