厦门市建设局网站摇号,seo观察网,新手如何做分销,论坛推广工具使用方式#xff08;选项式#xff09;
1、在 mian.js 导入 pinia 里的 createPinia 函数。
2、app.use 这个 createPinia 函数的返回值。
// main.jsimport { createPinia } from pinia;app.use(createPinia()); 3、创建一个 js 文件#xff08;该文件保存着共享的数据选项式
1、在 mian.js 导入 pinia 里的 createPinia 函数。
2、app.use 这个 createPinia 函数的返回值。
// main.jsimport { createPinia } from pinia;app.use(createPinia()); 3、创建一个 js 文件该文件保存着共享的数据共享的方法惯例上会叫该 js 文件为 store。
4、在 store 文件里从 pinia 里导入 defineStore 函数该函数是定义 store 的函数。
5、在 defineStore 函数的第二个参数定义共享的数据和方法。
6、用 export 导出 defineStore 函数的返回值该返回值是一个函数在这里我命名该函数为 useUserStore。
// userStore.jsimport { defineStore } from pinia;export const useUserStore defineStore(user, {state: () {return {name: 李小明,age: 18,hobby: basketball}},getters: {// this 形式// doubleAge() {// return this.age * 2// },doubleAge: (state) {return state.age * 2}},actions: {changeAge() {this.age 16},}}); 7、在需要该 store 里的数据和方法的 vue 文件里导入该 useUserStore 函数。
8、在 vue 文件里使用 setup 函数在 setup 函数里运行一次 useUserStore 函数并把该 useUserStore 函数的返回值赋予给一个变量该变量保存着上面 defineStore 函数定义的共享的数据和方法。
10、在 setup 函数里 return 该变量该变量就会被 vue 实例代理即 this。
templatedivp姓名{{ userStore.name }}/pp年龄{{ userStore.age }}/pp爱好{{ userStore.hobby }}/pp双倍年龄{{ userStore.doubleAge }}/pp计算属性{{ getName }}/pdivbutton clickuserStore.changeAgeuserStore 的 changeAge 方法点击改变年龄/button/divdiv stylemargin: 10px 0;app 的按钮button clickconsoleName stylemargin-left: 5px;点击我/button/div/div
/template
scriptimport { useUserStore } from ./store/userStore.js;export default {setup() {const userStore useUserStore();return {userStore // 导出 userStoreuserStore 会被 vue 实例代理即 this。}},data() {return {}},methods: {consoleName() {console.log(this.userStore.name); // 通过 this 访问 userStore}},computed: {getName() {return this.userStore.name // 通过 this 访问 userStore}}}/scriptstyle/style
温馨提示 store 会保存在组件实例的 _pStores 属性里。 整体演示
userStore.js全局状态文件
import { defineStore } from pinia;export const useUserStore defineStore(user, {// 箭头函数state: () {return {name: 李小明,age: 18,hobby: basketball}},// 普通函数// state() {// return {// name: 李小明,// age: 18,// hobby: basketball// }// },getters: {// this 形式// doubleAge() {// return this.age * 2// },// 参数形式doubleAge: (state) {return state.age * 2}},actions: {changeAge() {this.age 16},}
}); App.vue
templatedivp姓名{{ userStore.name }}/pp年龄{{ userStore.age }}/pp爱好{{ userStore.hobby }}/pp双倍年龄{{ userStore.doubleAge }}/pp计算属性{{ getName }}/pdiv stylemargin: 10px 0;button clickuserStore.changeAgeuserStore 的 changeAge 方法点击改变年龄/button/divdiv stylemargin: 10px 0;app 的按钮button clickconsoleName stylemargin-left: 5px;点击我/button/divdiv styleborder: 1px solid skyblue;padding: 10px ;HelloWorld/HelloWorld/div/div
/template
scriptimport { useUserStore } from ./store/userStore.js;import HelloWorld from ./components/HelloWorld.vue;export default {setup() {const userStore useUserStore();return { userStore }},components: {HelloWorld},mounted() {},data() {return {}},methods: {consoleName() {console.log(this.userStore.name);}},computed: {getName() {return this.userStore.name}}
}/scriptstyle/style 子组件 HelloWorld.vue
templatep我是子组件/ppuserStore.age 等于 {{ userStore.age }}/pbutton clickchangeAge我是子组件按钮/button
/templatescriptimport { useUserStore } from ../store/userStore.js;export default {setup() {const userStore useUserStore(); // 整体导出const changeAge userStore.changeAge; // 单独导出一个方法return {userStore,changeAge}},data() {return {}},methods: {}
}
/scriptstyle/styleState
state 的值是一个函数。
state 相当于 data是我们需要在组件之间共享的数据。
普通方法
state() {return {name: 李小明,age: 18,hobby: basketball}
}, 箭头函数
state: () {return {name: 李小明,age: 18,hobby: basketball}
},
在 TypeScript 中使用箭头函数将自动推断这些属性的类型。 Getters
getters 的值是一个对象。
getter 相当于计算属性计算的结果会被缓存下来只有当依赖的值发生改变才会重新计算。
使用第一个参数 state 可以访问 state
getters: {doubleAge(state) {return state.age * 2},
}
也可以在普通函数里使用 this从而访问到整个 pinia 实例所以可以在 getter 里访问另外的 getter
getters: {doubleAge() {return this.age * 2 // thispinia 实例 代理了 state 里的属性},
}
但是在箭头函数里因为箭头函数里 this 的指向问题所以箭头函数只能使用第一个参数 state 来访问 state
getters: {doubleAge: (state) {return state.age * 2}
} Actions
actions 的值是一个对象。
action 相当于方法。
普通函数可以通过 this 访问 pinia 实例
actions: {changeAge() {this.age 16},
}
因为箭头函数的 this 的问题Action 里使用箭头函数访问 pinia 实例是不行的。
