Compare commits

...

20 Commits

Author SHA1 Message Date
6c599bd5b5 add a+b+c+d 2022-06-10 11:43:33 +08:00
0aa6d2b650 add a+b+c 2022-06-10 11:36:43 +08:00
9dac635585 delete something 2022-06-10 09:46:54 +08:00
77e1158f8b Merge branch 'master' of remote 2022-06-09 16:49:44 +08:00
d893b41c0b realize vuex modularization 2022-06-09 16:46:50 +08:00
d8bb6ddda4 Add & modify files to realize vuex modularization 2022-06-09 16:22:58 +08:00
3794916e17 conflict fixed 2022-06-08 15:36:44 +08:00
62a4e4cb82 合并为最新的提交
第四次修改
2022-06-08 15:26:40 +08:00
c8eacd96c9 合并为最新的提交 2022-06-08 15:05:41 +08:00
e8cce09f51 push to moguyn/master after merging 2022-06-08 10:51:22 +08:00
1b5f17423d update dev's content 2022-06-08 10:44:18 +08:00
137c41c25b test branch merge 2022-06-08 10:09:27 +08:00
ff901ef6ea test branch modify 2022-06-08 10:07:34 +08:00
c729146239 touch test.txt for test 2022-06-08 08:41:25 +08:00
4caa51bf2e update div info 2022-06-07 16:49:06 +08:00
1ee817e8c0 update div content 2022-06-07 16:43:15 +08:00
85baf1d950 Merge branch 'master' of https://git.moguyn.cn/Miku/vuex 2022-06-07 16:23:08 +08:00
8aca717b0c import and use box component 2022-06-07 16:22:52 +08:00
44b5cc1298 add box.vue 2022-06-07 16:21:14 +08:00
150cd1c4d0 add copyright comment and update name 2022-06-07 15:19:10 +08:00
10 changed files with 113 additions and 63 deletions

View File

@@ -11,7 +11,7 @@
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<div id="app1"></div>
<!-- built files will be auto injected -->
</body>
</html>

View File

@@ -1,19 +1,24 @@
<!--moguyun-->
<template>
<div>
<my-add></my-add>
<p>-----------------------------------------</p>
<my-sub></my-sub>
<p>-----------------------------------------</p>
<box></box>
</div>
</template>
<script>
import add from './components/add.vue'
import sub from "./components/sub.vue"
import box from './components/box.vue'
export default {
components:{
"my-add":add,
"my-sub":sub
"my-sub":sub,
box
},
data(){
return{

View File

@@ -1,10 +1,11 @@
<!--moguyun-->
<template>
<div>
<h3>当前最新的count值为{{$store.state.count}}</h3>
<h3>当前最新的count值为{{$store.state.countOptions.count}}</h3>
<button @click="addcount">+1</button>
<button @click="btnhandle">+1 Async</button>
<button @click="btnhandle1">+5 Async</button>
<h3>{{$store.getters.showNum}}</h3>
<h3>{{$store.getters['countOptions/showNum']}}</h3>
</div>
</template>
@@ -17,16 +18,17 @@ export default {
},
methods: {
addcount(){
this.$store.commit('add')
this.$store.commit('countOptions/add')
},
//异步让count自增1
btnhandle(){
//dispatch函数专门用来触发action
this.$store.dispatch('addAsync')
this.$store.dispatch('countOptions/addAsync')
},
btnhandle1(){
this.$store.dispatch('addNAsync',5)
}
this.$store.dispatch('countOptions/addNAsync',5)
}
},
}
</script>

View File

@@ -0,0 +1,24 @@
<template>
<div>
<div>这是box组件测试,test</div>
<button @click="divide(2)">除2</button>
<div>count的值为{{count}}</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
data(){
return{ }
},
methods:{
divide(num){
this.$store.commit('countOptions/divide',num)
}
},
computed:{
...mapState('countOptions',['count'])
}
}
</script>

View File

@@ -1,3 +1,4 @@
<!--moguyun-->
<template>
<div>
<h3>当前最新的count值为{{count}}</h3>
@@ -15,12 +16,12 @@ export default {
return{ }
},
methods:{
...mapMutations(['subN','xc']),
...mapActions(['subNAsync']),
...mapMutations('countOptions',['subN','xc']),
...mapActions('countOptions',['subNAsync']),
},
computed:{
...mapState(['count']),
...mapGetters(['showNum','showNum1'])
...mapState('countOptions',['count']),
...mapGetters('countOptions',['showNum','showNum1'])
}
}
</script>

View File

@@ -1,3 +1,4 @@
//moguyun
import Vue from 'vue'
import App from './App.vue'
import store from './store'
@@ -7,4 +8,4 @@ Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
}).$mount('#app1')

View File

@@ -0,0 +1,55 @@
export default {
namespaced: true,
state: {
//存放全局共享数据
count:0
},
getters: {
showNum(state){
let newcount = state.count *2
return '测试getters,更新的数量为count*2: '+ newcount
},
showNum1(state){
let newcount = state.count *3
return '测试getters,更新的数量为为count*3: '+ newcount
}
},
mutations: {
//变更store中的数据
add(state){
state.count++
},
addN(state,step){
state.count+=step
},
sub(state){
state.count--
},
subN(state,step){
state.count-=step
},
xc(state,step){
state.count=state.count * step
},
divide(state,num){
state.count = state.count / num
}
},
actions: {
addAsync(context){
setTimeout(()=>{
context.commit('add')
},1000)
},
addNAsync(context,step){
setTimeout(()=>{
context.commit('addN',step)
},1000)
},
subNAsync(context,step){
setTimeout(()=>{
context.commit('subN',step)
},1000)
}
},
}

View File

@@ -1,58 +1,12 @@
//moguyun
import Vue from 'vue'
import Vuex from 'vuex'
import countOptions from '@/store/count'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//存放全局共享数据
count:0
},
getters: {
showNum(state){
let newcount = state.count *2
return '测试getters,更新的数量为count*2: '+ newcount
},
showNum1(state){
let newcount = state.count *3
return '测试getters,更新的数量为为count*3: '+ newcount
}
},
mutations: {
//变更store中的数据
add(state){
state.count++
},
addN(state,step){
state.count+=step
},
sub(state){
state.count--
},
subN(state,step){
state.count-=step
},
xc(state,step){
state.count=state.count * step
}
},
actions: {
addAsync(context){
setTimeout(()=>{
context.commit('add')
},1000)
},
addNAsync(context,step){
setTimeout(()=>{
context.commit('addN',step)
},1000)
},
subNAsync(context,step){
setTimeout(()=>{
context.commit('subN',step)
},1000)
}
},
modules: {
countOptions
}
})

4
vuex_demo1/test.md Normal file
View File

@@ -0,0 +1,4 @@
a
b
c
d

4
vuex_demo1/test.txt Normal file
View File

@@ -0,0 +1,4 @@
测试远程dev分支
主分支修改
测试合并
update dev