zf厂手表网站,免费网站生成器,手机建网站 优帮云,做做网站已更新Vuex概述
vuex是一个vue的状态管理工具#xff0c;状态就是数据#xff08;多组件共享数据#xff09;。
优势#xff1a;
共同维护一份数据#xff0c;数据集中化管理响应式变化操作简洁#xff08;vuex提供了一些辅助函数#xff09;
vuex的使用
安装vuex插件
y…Vuex概述
vuex是一个vue的状态管理工具状态就是数据多组件共享数据。
优势
共同维护一份数据数据集中化管理响应式变化操作简洁vuex提供了一些辅助函数
vuex的使用
安装vuex插件
yarn add vuex3创建vuex模块文件
新建store/index.js专门存放vuex
创建仓库
import Vue from vue
import Vuex from vuexVue.use(Vuex)const store new Vuex.Store()export default store
main.js导入挂载
import Vue from vue
import App from ./App.vue
import store from /store/indexVue.config.productionTip falsenew Vue({render: h h(App),store
}).$mount(#app)state状态
1.提供数据
state提供唯一的公共数据源所有共享的数据都要统一放到Store中的stare中储存。
在state对象中可以添加我们要共享的数据。
const store new Vuex.Store({state: {title: 大标题,count: 100}
})2.使用数据
通过store直接访问通过辅助函数简化
获取store
this.$storeimport 导入 stroe
直接访问
templatedivp数据{{ $store.state.count }}/pSon1Component/Son1ComponentSon2Component/Son2Component/div
/template
辅助函数mapstate
mapstate是辅助函数帮助我们把store中的数据自动映射到组件的计算机属性中。
导入mapState
import { mapState } from vuex
通过对象的方式映射 computed: {...mapState([count, title])}
在模板中使用
templatedivp数据{{ count }}/pSon1Component/Son1ComponentSon2Component/Son2Component/div
/template
mutations
1.定义mutations对象对象中存放修改state的方法
import Vue from vue
import Vuex from vuexVue.use(Vuex)const store new Vuex.Store({state: {title: 大标题,count: 100},mutations: {addcount (state) {state.count 1},subcount (state) {state.count - 1}}
})export default store
2.组件中提交调用mutations
templatedivp数据{{ this.$store.state.count }}/p
button clickhandleAdd1/button/div
/templatescript
export default {name: Son1Component,methods: {handleAdd () {this.$store.commit(addcount)}}
}
/script
mutations传参语法
提交mutations是可以传递参数的this.$store,commit(xxx,参数)
1.提供mutation函数带参数—提交载荷payload
import Vue from vue
import Vuex from vuexVue.use(Vuex)const store new Vuex.Store({state: {title: 大标题,count: 100},mutations: {addcount (state, n) {state.count n},subcount (state, n) {state.count - n}}
})export default store
templatedivp数据{{ this.$store.state.count }}/p
button clickhandleAdd(1)1/button
button clickhandleAdd(5)5/button/div
/templatescript
export default {name: Son1Component,methods: {handleAdd (n) {this.$store.commit(addcount, n)}}
}
/script
传递多个参数时可以包装成一个对象传递
handleAdd (n) {this.$store.commit(addcount, {count: n,msg: haha})} addcount (state, obj) {state.count obj.countconsole.log(obj.msg)}
input的实时输入更新
输入框渲染
input :valuecount inputhandInput typetext
监听输入获取内容 methods: {handInput (e) {this.$store.commit(changecount, e.target.value)}
封装mutation处理函数 changecount (state, newcount) {state.count newcount}
辅助函数mapMutations
mapMutations和mapState很像它是把位于mutations中的方法提取了出来映射到组件methods中
templatedivp数据{{ this.$store.state.count }}/pbutton clicksubcount(1)-1/button/div
/templatescript
import { mapMutations } from vuex
export default {name: Son1Component,methods: {...mapMutations([subcount])}
}
/script
actions
处理异步处理mutations必须是同步的便于监测数据变化记录调试
1.提供action方法 actions: {changecountactions (context, num) {setTimeout(() {context.commit(changecount, num)}, 1000)}}
在页面中dispath调用 handchange (n) {this.$store.dispatch(changecountactions, n)}
辅助函数mapActions
mapActions是把位于actions中的方法提供了出来映射到组件methods中
templatedivp数据{{ this.$store.state.count }}/pbutton clicksubcount(1)-1/buttonbutton clickchangecountactions(888)一秒改成888/button/div
/templatescript
import { mapMutations, mapActions } from vuex
export default {name: Son1Component,methods: {...mapMutations([subcount]),...mapActions([changecountactions])}
}
/scriptgetters
类似于计算属性
除了state之外有时我们还需要从state中派生出一些状态这些状态是依赖state的此时会用到getters。
定义getters
getters函数的第一个参数是stategetters函数必须要有返回值 getters: {filterList (state) {return state.list.filter(item item 5)}}
访问getters
通过store访问getters通过辅助函数mapGetters映射
div{{ $store.getters.filterList }}/div
templatedivp数据{{ this.$store.state.count }}/pbutton clicksubcount(1)-1/buttonbutton clickchangecountactions(888)一秒改成888/buttonhrdiv{{ filterList }}/div/div
/templatescript
import { mapMutations, mapActions, mapGetters } from vuex
export default {name: Son1Component,methods: {...mapMutations([subcount]),...mapActions([changecountactions])},computed: {...mapGetters([filterList])}
}
/script
Pinia
Pinia是vue的专属的最新状态管理库是Vuex状态管理工具的代替品
优点
提供更简单的API去掉了mutation提供符合组合式风格的API和Vue3新语法统一去掉了modules的概念每一个store都是一个对立的模块配合TypeScript更加友好提供可靠的类型推断
手动添加Pinia到Vue项目
在实际开发项目时关于Pinia的配置可以在创建项目时自动添加
1.使用Vite创建一个空的Vue3项目
2.按照官方文档安装pinia项目中
yarn add pinia
# 或者使用 npm
npm install pinia
import ./assets/main.cssimport { createApp } from vue
import {createPinia} from pinia
import App from ./App.vueconst pinia createPinia()
const app createApp(App)
app.use(pinia).mount(#app)Pinia基础使用
1.定义store
import { defineStore } from pinia
import { ref } from vueexport const usecounterstore defineStore(counter,(){const count ref(100)return {count}
})
2.组件使用store
script setup
import son1 from /components/son1.vue
import son2 from /components/son2.vue
import {usecounterstore} from /store/counter
const counterstore usecounterstore()
/scripttemplate
divh3数据{{ counterstore.count }}/h3son1/son1son2/son2
/div
/template
import { defineStore } from pinia
import { ref,computed } from vueexport const usecounterstore defineStore(counter,(){// 声明数据stateconst count ref(100)// 声明操作数据的方法active普通函数const addcount ()count.valueconst subcount ()count.value--//声明基于数据派生的计算属性getterscomputed const double computed(() count.value*2)return {count,addcount,subcount,double}
})
active异步实现
import { defineStore } from pinia
import { ref,computed } from vueexport const usecounterstore defineStore(counter,(){// 声明数据stateconst count ref(100)// 声明操作数据的方法active普通函数const addcount ()count.valueconst subcount ()count.value--//声明基于数据派生的计算属性getterscomputed const double computed(() count.value*2)return {count,addcount,subcount,double}
})
script setup
import son1 from /components/son1.vue
import son2 from /components/son2.vue
import {usecounterstore} from /store/counter
import {usechannelstore} from /store/channel
const counterstore usecounterstore()
const usestore usechannelstore()
/scripttemplate
divh3数据{{ counterstore.count }}/h3son1/son1son2/son2hrbutton clickusestore.getlist获取数据/buttonulli v-foritem in usestore.channellist :keyitem.id{{ item.name }}/li/ul
/div
/template
storeToRefs
用于将 Pinia store 实例中的状态属性转换为 ref 对象。
import { defineStore } from pinia;const useMyStore defineStore({id: myStore,state: () ({count: 0,text: Hello, Pinia!,}),
});// 在组件中使用 storeToRefs 将状态转换为 ref 对象
const myStore useMyStore();
const { count, text } pinia.storeToRefs(myStore);Pinia持久化
1.安装插件 pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate
2.main.js使用
import persist from pinia-plugin-persistedstate
...
app.use(createPinia().use(persist))
import ./assets/main.cssimport persist from pinia-plugin-persistedstate
import { createApp } from vue
import {createPinia} from pinia
import App from ./App.vueconst pinia createPinia()
const app createApp(App)
app.use(pinia.use(persist))
app.mount(#app)3.store仓库中persist:true开启
import { defineStore } from pinia
import { ref,computed } from vueexport const usecounterstore defineStore(counter,(){// 声明数据stateconst count ref(100)// 声明操作数据的方法active普通函数const addcount ()count.valueconst subcount ()count.value--//声明基于数据派生的计算属性getterscomputed const double computed(() count.value*2)return {count,addcount,subcount,double}
},{persist:true
})
详细见配置 | pinia-plugin-persistedstate (prazdevs.github.io)
