代做淘宝联盟网站,网站流程,安徽省建设干部培训学校网站,软件工程与项目管理前言 接上一篇学习笔记#xff0c;今天主要是抽空学习了vue的状态管理#xff0c;这里学习的是vuex#xff0c;版本4.1。学习还没有学习完#xff0c;里面有大坑#xff0c;难怪现在官网出的状态管理用Pinia。 一、vuex状态管理知识点 上面的方式没有写全#xff0c;还有…前言 接上一篇学习笔记今天主要是抽空学习了vue的状态管理这里学习的是vuex版本4.1。学习还没有学习完里面有大坑难怪现在官网出的状态管理用Pinia。 一、vuex状态管理知识点 上面的方式没有写全还有一种用钩子的方式,code示例见下面后面更精彩。
二、code示例
1.新建vue项目 具体方式就不重复了我这里是用的webstormwebstorm新建vue项目” 这里需要安装vuex命令行端执行npm install vuex
2.代码示例
先上目录截图 main.js
import { createApp } from vue
import App from ./App.vue
import VuexStore from ./store;createApp(App).use(VuexStore).mount(#app)
store/index.js
//vuex4写法
import {createStore} from vuexconst vuexStore createStore({//用来存储状态数据state: {author: 韦小宝,nickname: 肥仔哥哥,list: [{name: tom,age: 1,sex: 男},{name: jerry,age: 2,sex: 女},{name: lili,age: 3,sex: 男}]},mutations: {},actions: {},modules: {}
})//下面是vuex3的写法
/*import Vuex from vuexconst state {author: 肥仔哥哥,list: [{name: tom,age: 1,sex: 男},{name: jerry,age: 2,sex: 女},{name: lili,age: 3,sex: 男}]
}const mutations {}const actions {}const getters {}const vuexStore new Vuex.Store({state, // 状态mutations, // 包含多个更新state函数的对象actions, // 包含多个队形事件回调函数的对象getters // 包含多个getter计算属性函数的对象
})*/export default vuexStoreApp.vue
templateimg altVue logo src./assets/logo.pngHelloWorld/hrCompA/
/templatescript setup
import HelloWorld from /components/HelloWorld.vue;
import CompA from /components/CompA.vue;/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
HelloWorld.vue
templatediv classhellopdemo author:{{ author }}/ph1list 数据/h1ulli v-foritem in list :keyitem.idp{{ item.name }} | {{ item.age }} | {{ item.sex }}/p/li/ulp辅助函数读取nickname{{ nickname }}/pp辅助函数读取localCurAge{{ mapStateParam.localCurAge }}/p/div
/templatescript setup
import {computed} from vue;
import vuexStore from /store/index;//store辅助函数
import {useStore, mapState} from vuex;//方式1:store存储对象访问
const author vuexStore.state.author;
const list vuexStore.state.list;
console.log(HelloWorld setupstore对象:, vuexStore.state)//方式2:用useStore钩子与store对象一样
const useStoreHook useStore();
console.log(HelloWorld setupuseStore钩子:, useStoreHook.state)//方式3store辅助函数访问
const mapStateParam computed(() {return {localCurAge: 17,...mapState([author,nickname,list]) //...对象展开运算符}
})
console.log(HelloWorld setupmapState辅助函数:, mapStateParam.value.localCurAge);
//console.log(HelloWorld setupmapState辅助函数:, mapStateParam.value.nickname());/*
其实可以直接接收用computed包是转计算属性
const mapStateParamNew mapState([author,nickname,list]);
console.log(HelloWorld setupmapState辅助函数2:, mapStateParamNew.author())
*//scriptstyle scoped/style
ComA.vue
script
import {mapState} from vuex;//比较HelloWorld的组合式API写法
//大坑辅助函数mapStatevuex4不支持setup写法只能用组合式API写法
export default {computed: {localCurAge: {get() {return 18;}},...mapState([author, nickname, list])},
}/scripttemplatediv classhellopdemo author:{{ author }}/ph1list 数据/h1ulli v-foritem in list :keyitem.idp{{ item.name }} | {{ item.age }} | {{ item.sex }}/p/li/ulp辅助函数读取nickname{{ nickname }}/pp辅助函数读取localCurAge{{ localCurAge }}/p/div
/templatestyle scoped/style三、效果截图 四、异常原因
上半部分nickname不能得到的原因
vuex官网明确说明辅助函数必须使用选项式方式期待后面的版本能兼容下
总结
状态管理应该还是很有必要掌握的现在vue官网介绍的是Pinia菠萝比vuex轻 vuex状态管理的只能分2篇分享了我也是学习过程中被困扰半天今晚还在发版本前端键盘都敲出火星了后端都在等待bug验完。 与大家共同进步uping
