feature:先学一点，明天学demo，学完自己练个手就差不多了
This commit is contained in:
parent
bcc97b05d1
commit
ca37a1831f
@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<img alt="Vue logo" src="./assets/logo.png">
|
<HelloWorld/>
|
||||||
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|||||||
@ -1,61 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="hello">
|
<div>{{ mainStore.count }}</div>
|
||||||
<h1>{{ msg }}</h1>
|
<hr>
|
||||||
<p>
|
<div>{{ count }}</div>
|
||||||
For a guide and recipes on how to configure / customize this project,<br>
|
<div>{{ foo }}</div>
|
||||||
check out the
|
<div>{{ count10 }}</div>
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
<hr>
|
||||||
</p>
|
<button @click="updateCount">更新数据</button>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { userMainStore } from "@/store";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
|
||||||
<script lang="ts">
|
const mainStore = userMainStore()
|
||||||
import { defineComponent } from 'vue';
|
console.log(mainStore.count)
|
||||||
|
|
||||||
export default defineComponent({
|
// 直接结构的值 会丧失响应式
|
||||||
name: 'HelloWorld',
|
// const {count } = mainStore
|
||||||
props: {
|
// 使用pinia提供的解构方法
|
||||||
msg: String,
|
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>
|
</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 { createApp } from 'vue'
|
||||||
import App from './App.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