feature:先学一点，明天学demo，学完自己练个手就差不多了
This commit is contained in:
parent
bcc97b05d1
commit
ca37a1831f
src
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
|
||||
<HelloWorld/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -1,61 +1,37 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>{{ mainStore.count }}</div>
|
||||
<hr>
|
||||
<div>{{ count }}</div>
|
||||
<div>{{ foo }}</div>
|
||||
<div>{{ count10 }}</div>
|
||||
<hr>
|
||||
<button @click="updateCount">更新数据</button>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { userMainStore } from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
const mainStore = userMainStore()
|
||||
console.log(mainStore.count)
|
||||
|
||||
export default defineComponent({
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
});
|
||||
// 直接结构的值 会丧失响应式
|
||||
// const {count } = mainStore
|
||||
// 使用pinia提供的解构方法
|
||||
const { count, foo, count10 } = storeToRefs(mainStore)
|
||||
const updateCount = () => {
|
||||
// 方式1 直接修改
|
||||
// mainStore.count++
|
||||
// 方式2 $patch 批量更新
|
||||
// mainStore.$patch({
|
||||
// count: mainStore.count++,
|
||||
// foo: mainStore.foo + '='
|
||||
// })
|
||||
// 方式3 $patch 传递一个函数
|
||||
// mainStore.$patch(state => {
|
||||
// state.count++;
|
||||
// state.foo += '='
|
||||
// })
|
||||
// 方式4 调用action中的方法
|
||||
mainStore.changeState()
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
||||
11
src/main.ts
11
src/main.ts
@ -1,4 +1,13 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
createApp(App).mount('#app')
|
||||
// 1. 实例化pinia
|
||||
const pinia = createPinia()
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// 2. 挂载pinia
|
||||
app.use(pinia)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
28
src/store/index.ts
Normal file
28
src/store/index.ts
Normal file
@ -0,0 +1,28 @@
|
||||
// 1.定义容器
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
// 参数1： 容器id，必须唯一，将来pinia会把所有的容器挂载到根容器
|
||||
// 参数2： 选项对象
|
||||
export const userMainStore = defineStore('main', {
|
||||
|
||||
// 类似于data
|
||||
// 必须是函数: 这样是为了服务端渲染的时候表面交叉请求导致的数据状态污染？？？
|
||||
// 必须是箭头函数，为了更好的ts的类型推断
|
||||
state: () => ( { count: 50, foo: 'ccc' } ),
|
||||
getters: {
|
||||
// 函数接受一个可选参数，state状态对象
|
||||
count10( state ) {
|
||||
return state.count+5
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
// 不能使用箭头函数，this会绑定到外部去
|
||||
changeState() {
|
||||
this.count++;
|
||||
this.foo += '='
|
||||
}
|
||||
}
|
||||
})
|
||||
// 2.使用容器中的state
|
||||
// 3.修改state
|
||||
// 4.容器中action的使用
|
||||
Loading…
Reference in New Issue
Block a user