vuex在vue3的简单使用

index.js文件import { createStore } from 'vuex'
export default createStore({state: {num: 10,sum:20,strValue:'这是vuex中的数据'},getters: {total(state) {return state.num+state.sum}},mutations: {changeNum(state,value) {state.num = value},},actions: {changeSum(context,value) { context.commit('changeNum',value)}},modules: {},
})

如何使用mutations中的方法以及何如使用actions中的方法请看index.vue组件

actions和mutitions的区别

actions和mutations都能够使用方法，那么他们的区别是什么，那我去查了很多贴子：无非就是说mutations中的方法是同步的，而actions中的方法是异步的，其实根据场景来使用吧，你想要程序按照顺序来执行，那么你就使用mutations，如果你这个数据不是很急着使用想要下面的先执行，那么你就可以使用actions
vuex中的state数据不允许直接赋值修改，所以vuex创建了mutations用于定义方法来修改state中的数据，但是只能同步修改。如果异步修改会造成调试工具跟实际数据不对应，所以vuex又提供了actions，用于异步触发mutations中的方法。
总结：mutations中的方法可以直接修改state数据，actions是异步执行mutations中的方法，所以它俩都可以改数据，区别是一个是同步一个是异步。

vuex持久化存储

yarn add vuex-persistedstate -s（使用这个插件）
持久化是存储到localStorage里面
如何去持久化呢：localStroage.removeItem(key)
只是说使用这么多的插件方便了一点点而已，自己写也可以写，只不过现在着实时间精力有限，先用着大佬写的。

import { createStore } from 'vuex'
import user from './modules/user'
import persistedState from 'vuex-persistedstate'
import * as Cookie from 'js-cookie'
export default createStore({state: {num: 10,sum:20,strValue:'这是vuex中的数据'},getters: {total(state) {return state.num+state.sum}},mutations: {changeNum(state,value) {state.num = value},},actions: {changeSum(context,value) { context.commit('changeNum',value)}},modules: { user },// 配置持久化plugins: [persistedState({// 这个key是存储的名称key: 'persisted-vuex',// 这个是需要持久化的模块paths: ['user'],})]
})

user模块export default {//开启名称空间确实对自己友好一点namespaced:true,state: {userInfo:'userInfo'},getters: {},mutations: {updateUserInfo(state, value) { state.userInfo=value}},actions: {UPDATE_USERINFO(context, value) { context.commit('updateUserInfo',value)}}
}

index.vue文件

pinia使用

并不是有了新技术就一定要用什么新技术吧，反正不断学习，自己判断，有时候最新的并不一点是最合适的。。。。。
pinia里面使用模块化是很方便的，不需要使用moudle，但是有一点需要注意的。自己看index文件，第二行注释。

index.jsimport { defineStore } from 'pinia'
//这里的storId不能够重复，不然直接没有数据，亲测。
export const useStore = defineStore('storId', {state: () => { return {counter: 0,num: 1,age:20,}},getters: {changeNum() { return this.num+120}},actions: {upCounter(val) { this.counter+=val},}
})user.jsimport { defineStore
} from "pinia";
export const userStore = defineStore('userID', {state: () => { return {username:'user.js文件'}}})

使用（index.vue文件）

Pinia数据持久化

普通的跟vuex差不多，localstroage，sessionstroage,Cookie里面
插件版本pinia-plugin-persistedstate(用这个插件)

together.js
import { createPinia } from "pinia";
import pinaPluginPersist from 'pinia-plugin-persistedstate'
const store = createPinia()
store.use(pinaPluginPersist)
export default store

index.jsimport { defineStore } from 'pinia'
export const useStore = defineStore('storId', {state: () => { return {counter: 0,num: 1,age:20,}},getters: {changeNum() { return this.num+120}},actions: {upCounter(val) { this.counter+=val},},// 启动持久化persist: {// 是否开启enabled: true,// 持久化策略// 存储名称key: 'useStroage',// 存储位置stroage:window.localStorage}
})我这里只在index文件中开了

user.jsimport { defineStore
} from "pinia";
export const userStore = defineStore('userID', {state: () => { return {username:'user.js文件'}}})

pinia与vuex的区别

1.vuex不可以直接修改state中的属性的值，需要通过mutations或者actions中的方法来修改。pinia可以使用storeToRefs()来直接修改，也可以通过store.$patch(state=>{})来批量修改属性值也是没有问题的。
2.pinia中没有mutations，可以直接通过store对象来输出方法。
OS：这应该是程序员为了偷懒写的插件啊哈哈哈哈，我猜是的。真的挺方便的。