Permalink
Browse files

添加vuexDemo

  • Loading branch information...
1 parent 2aa4e2b commit bb6fd3206d158232d3ebe89abc15b3c6a5886f04 @leenty committed Dec 4, 2016
No changes.
@@ -6,6 +6,7 @@ button
color currentColor
padding 0
cursor pointer
+ vertical-align -30%
.b-menu
width 25px
@@ -35,3 +36,30 @@ button
box-shadow 0 0 0 0 #fff
transform rotateZ(135deg) translateY(0)
+.b-svgBtn
+ padding 5px
+ background-color c-ff
+ border-radius 50%
+ color c-master
+ box-sizing content-box
+ border 1px solid c-master
+ height 24px
+ transition all .5s cb-duang
+ // position relative
+ // &:after
+ // content ' '
+ // display block
+ // width 5px
+ // height @width
+ // background-color c-master
+ // border-radius 50%
+ // position absolute
+ // left 50%
+ // top 50%
+ // transform-origin center center
+ // transform translate(-50%, -50%)
+ svg
+ border-radius 50%
+.b-svgBtn--Active
+ background-color c-master
+ color #fff
@@ -1,20 +1,29 @@
-.l-mH--auto
- margin 0 auto
-
.l-ta--c
text-align center
// flex
-.l-flexH--sa
+flexH()
display flex
flex-flow row nowrap
+flexV()
+ display flex
+ flex-flow column nowrap
+.l-flexH
+ flexH()
+.l-flexV
+ flexV()
+.l-flexH--sa
+ flexH()
align-items center
justify-content space-around
.l-flexV--c
- display flex
- flex-flow column nowrap
+ flexV()
align-items center
justify-content center
+.l-flex--auto
+ flex 0 0 auto
+.l-flex--full
+ flex 1 1 100%
// page
.l-page--Full
@@ -25,8 +34,28 @@
height 100%
// padding
+.l-p10
+ padding 10px
+.l-pH10
+ padding-left 10px
+ padding-right 10px
.l-pt10
padding-top 10px
+.l-pr10
+ padding-right 10px
.l-pl10
padding-left 10px
-
+
+// margin
+.l-m--None
+ margin 0
+.l-mH--auto
+ margin 0 auto
+.l-mH10
+ margin-left 10px
+ margin-right 10px
+.l-mr10
+ margin-right 10px
+.l-mb5
+ margin-bottom 5px
+
@@ -1,3 +1,17 @@
+// font-size
+.u-fs12
+ font-size 12px
+.u-fs14
+ font-size 14px
+.u-fs16
+ font-size 16px
+.u-fs18
+ font-size 18px
+
+// font-color
+.u-c--9e
+ color c-9e
+
/*** link ***/
.u-link
text-decoration none
@@ -41,7 +55,8 @@
.u-va--tb
vertical-align text-bottom
-
-
-
-
+// background
+.u-bgi--Center
+ background-size cover
+ background-position center center
+ background-repeat no-repeat
@@ -9,6 +9,7 @@ c-text = #34495e
c-bgc = #edeef0
c-ff = #fff
+c-9e = #9e9e9e
// size
s-articleList = 200px
@@ -18,5 +18,11 @@
</g>
<g id="svg__articleIcon" fill="currentColor" fill-rule="evenodd"><path d="M17 17.503c0 .826-.673 1.5-1.5 1.5-.4 0-.777-.157-1.06-.44-.353-.352-.42-.607-.436-1.144-.024-.794-.664-1.416-1.498-1.416-.817 0-1.493.665-1.506 1.482-.022 1.413-.41 1.518-1 1.518-.594 0-.984-.108-1-1.56-.009-.795-.664-1.44-1.5-1.44-.79 0-1.443.593-1.517 1.384-.099 1.056-.611 1.616-1.483 1.616-.827 0-1.5-.674-1.5-1.5v-6.5c0-3.86 3.14-7 7-7s7 3.14 7 7v6.5zm2.414-14.087A2 2 0 1 0 16.586.588a1.99 1.99 0 0 0-.511 1.925L15.039 3.55A8.947 8.947 0 0 0 10 2.003c-1.866 0-3.6.57-5.039 1.546L3.925 2.514A1.992 1.992 0 0 0 3.414.589 2 2 0 1 0 .586 3.417a1.994 1.994 0 0 0 1.925.51l.931.932A8.962 8.962 0 0 0 1 11.002v6.5c0 1.93 1.57 3.5 3.5 3.5 1.251 0 2.267-.573 2.875-1.551.562 1.24 1.662 1.552 2.625 1.552.954 0 2.043-.305 2.61-1.514.116.162.252.325.415.488a3.477 3.477 0 0 0 2.475 1.026c1.93 0 3.5-1.57 3.5-3.5v-6.5a8.962 8.962 0 0 0-2.442-6.144l.931-.931a1.994 1.994 0 0 0 1.925-.511z"/><path d="M10 12.002c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2m0-6c-2.206 0-4 1.795-4 4 0 2.207 1.794 4 4 4s4-1.793 4-4c0-2.206-1.794-4-4-4"/></g>
<g id="svg__demo"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12 3.002c-4.486 0-8 3.584-8 8.158 0 7.757 7.33 10.656 7.642 10.775a1 1 0 0 0 .716 0C12.67 21.816 20 18.917 20 11.16c0-4.574-3.514-8.158-8-8.158zm.004 16.909C10.665 19.276 6 16.667 6 11.16c0-.183.011-.362.026-.541.073 1.316.699 4.295 4.913 4.295 0 0 .967-4.861-4.833-4.907C6.619 7.124 9.022 5.002 12 5.002s5.382 2.122 5.895 5.005c-5.8.046-4.833 4.907-4.833 4.907 4.213 0 4.84-2.979 4.913-4.294.014.178.025.358.025.54 0 5.548-4.634 8.116-5.996 8.751z"/></g>
+ <g id="svg__heart--line">
+ <path fill="none" d="M0 0h24v24.001H0z"/><g fill="currentColor"><path d="M11.994 19.71A37.444 37.444 0 0 1 8.179 16H5.557c2.564 3.22 5.608 5.619 5.828 5.789a.994.994 0 0 0 1.228 0c.196-.152 2.647-2.084 4.996-4.789h-2.714a41.201 41.201 0 0 1-2.901 2.71zM4.103 9a5.67 5.67 0 0 1-.104-1c0-2.43 1.57-4 4-4 1.289 0 2.352.938 2.787 2h2.427c.435-1.062 1.498-2 2.787-2 2.43 0 4 1.57 4 4 0 .653-.133 1.324-.35 2h2.062c.173-.668.288-1.337.288-2 0-3.533-2.467-6-6-6-1.594 0-3.071.837-4 2.08C11.07 2.837 9.593 2 7.999 2c-3.533 0-6 2.467-6 6 0 .332.038.666.083 1h2.021z"/><path d="M19.696 12l-2.489 1.659-4.125-5.156-4.083 4.083-3-3L3.585 12H.999v2h3.414l1.586-1.585 3 3 3.917-3.918 3.875 4.844L20.302 14h2.697v-2z"/></g>
+ </g>
+ <g id="svg__heart--solid">
+ <path fill="none" d="M0 0h24v24.001H0z"/><g fill="currentColor"><path d="M2.76 10.002l3.243-3.243L8.754 9.51l4.469-5.587 4.612 6.918 1.26-.84h2.62c.173-.668.288-1.337.288-2 0-3.533-2.467-6-6-6-1.594 0-3.071.837-4 2.08-.929-1.243-2.406-2.08-4-2.08-3.533 0-6 2.467-6 6 0 .663.115 1.332.288 2h.469zM9.251 18.494l-3.249-3.249-.579.579c2.591 3.309 5.742 5.794 5.965 5.967a.994.994 0 0 0 1.228 0 38.463 38.463 0 0 0 3.317-2.984l-3.151-4.727-3.531 4.414z"/><path d="M19.7 12.002l-2.42 1.613-4.204-6.305-4.157 5.195-2.917-2.917-2.414 2.414H1.002v2h3.415l1.585-1.585 3.083 3.082 3.844-4.804 3.796 5.694 3.58-2.387h2.697v-2z"/></g>
+ </g>
</defs>
</svg>
@@ -1,13 +1,16 @@
<template lang="pug">
.demo
- h1.l-ta--c 一下部分皆为(呆萌)
+ h1.l-ta--c 以下部分皆为(呆萌)
+ p
+ router-link(:to="{name: 'DemoVuexState'}").u-link vuex State Demo
.demo__content
- p
- router-link(:to="{path: 'article', params: { userId: 123 }}").u-link article(带params)
- p
- router-link(:to="{name: 'Article', path: '/article', params: { userId: 123 }, query: { plan: 'private' }}").u-link article(带params和query)
- p
- router-link(:to="{ path: 'article'}", append).u-link article(有append属性)相对地址
+ router-view
+ //- p
+ //- router-link(:to="{path: 'article', params: { userId: 123 }}").u-link article(带params)
+ //- p
+ //- router-link(:to="{name: 'Article', path: '/article', params: { userId: 123 }, query: { plan: 'private' }}").u-link article(带params和query)
+ //- p
+ //- router-link(:to="{ path: 'article'}", append).u-link article(有append属性)相对地址
//- button(@click="test") test
//- section.slide__video
video(controls, poster, autoplay, width="100%")
@@ -0,0 +1,51 @@
+<template lang="pug">
+ .demo__vuexState
+ .demo__userCard.l-flexH.l-p10.l-mH10
+ .demo__userHeader.u-bgi--Center.l-flex--auto.l-mr10
+ .demo__userInfo.l-flex--full
+ p.l-m--None.l-mb5.u-fs18 周星星
+ p.l-m--None.l-mb5.u-fs14.u-c--9e 其实我是一个演员!
+ p
+ button.b-svgBtn(
+ @click="DEMO__VUEX_FOLLOW",
+ :class="{'b-svgBtn--Active': mapStateFollow}"
+ )
+ svg
+ use(xlink:href="#svg__heart--line")
+ span(@click="DEMO__VUEX_FOLLOW") {{demoFollowStatus}}
+ p 当前vuex状态
+ p mapState方法得到的原值:{{mapStateFollow}}
+ p mapGetters方法得到的转化值:{{demoFollowStatus}}
+</template>
+
+<script>
+import { mapState, mapGetters, mapMutations } from 'vuex'
+export default {
+ data () {
+ return {
+ }
+ },
+ computed: {
+ ...mapState({
+ mapStateFollow: ({demo}) => demo.demoFollow
+ }),
+ ...mapGetters(['demoFollowStatus'])
+ },
+ methods: {
+ ...mapMutations(['DEMO__VUEX_FOLLOW'])
+ }
+}
+</script>
+
+<style lang="stylus">
+ @import '../assets/stylus/preinstall'
+ .demo__userCard
+ max-width 300px
+ border 1px solid c-master
+ border-radius 5px
+ .demo__userHeader
+ width 100px
+ height @width
+ border-radius 50%
+ background-image url('/static/img/demo/zxcyy.jpg')
+</style>
View
@@ -1,6 +1,7 @@
import Home from './components/Home.vue'
import Article from './components/Article.vue'
import Demo from './components/Demo.vue'
+import DemoVuexState from './components/DemoVuexState.vue'
const routes = [
{
@@ -16,7 +17,14 @@ const routes = [
{
name: 'Demo',
path: '/demo',
- component: Demo
+ component: Demo,
+ children: [
+ {
+ name: 'DemoVuexState',
+ path: '/vuex_state',
+ component: DemoVuexState
+ }
+ ]
}
]
View
@@ -4,6 +4,7 @@ import Vuex from 'vuex'
// import * as getters from './getters'
import status from './modules/status'
+import demo from './modules/demo'
// import createLogger from '../../../src/plugins/logger'
Vue.use(Vuex)
@@ -14,7 +15,8 @@ export default new Vuex.Store({
// actions,
// getters,
modules: {
- status
+ status,
+ demo
},
strict: debug
// plugins: debug ? [createLogger()] : []
@@ -0,0 +1,28 @@
+import * as types from '../types'
+
+const state = {
+ demoFollow: false
+}
+
+const getters = {
+ demoFollowStatus: state => state.demoFollow ? '已关注' : '未关注'
+}
+
+const mutations = {
+ [types.DEMO__VUEX_FOLLOW] (state, status = NaN) {
+ state.demoFollow = isNaN(status) ? !state.demoFollow : status
+ }
+}
+
+const actions = {
+ demoFollowSwitch ({commit}, status) {
+ commit(types.DEMO__VUEX_FOLLOW, status)
+ }
+}
+
+export default {
+ state,
+ getters,
+ actions,
+ mutations
+}
View
@@ -1,3 +1,6 @@
export const ARTICLE_LIST = 'ARTICLE_LIST'
export const ARTICLE_LIST_SWITCH = 'ARTICLE_LIST_SWITCH'
export const SCROLLDATA = 'SCROLLDATA'
+
+// demo
+export const DEMO__VUEX_FOLLOW = 'DEMO__VUEX_FOLLOW'
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit bb6fd32

Please sign in to comment.