前端模擬登陸註冊靜態實現示例

時間  2020-02-15
標籤 前端 模擬 登陸 註冊 靜態 實現 示例 欄目 網站開發 简体版
原文   原文鏈接

點擊藍色 「達達前端」 關注我哦!javascript

加個 「星標」 ，天天一篇文章，一塊兒學編程css

​

登陸註冊，說說登陸，須要用戶名，用戶名的提示內容爲請輸入用戶名，密碼的提示爲8-18位不含特殊字符的數字、字母組合。還有一個點擊按鈕。html

<view class="input-content">
  <view class="input-item">
    <text class="username">用戶名</text>
    <input v-model="query.username" placeholder="請輸入用戶名"/>
  </view>
  <view class="input-item">
    <text class="password">密碼</text>
    <input v-model="query.password" 
    placeholder="8-18位不含特殊字符的數字、字母組合"
    maxlength="20"
    password />
  </view>
</view
<button class="confirm-btn" @click="toLogin" >登陸</button>

<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
            {{count}}
<button @click='increment'>+</button>
</div>
<script src="index.pack.js"></script>
</body>
</html>

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);


const store = new Vuex.Store({
state: {
count: 0
    },
mutations: {
    }
});


import { mapState } from 'vuex';


new Vue({ 
el: '#app',
    store,
data: {
    },
computed: mapState([
'count'
    ]),
});

vuex是專爲vue.js應用程序開發的狀態管理模式，它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則狀態以一種可預測的方式發生變化。前端

什麼是狀態管理模式？vue

new Vue({
// state
data () {
return {
      count: 0
    }
  },
// view
  template: `
    <div>{{ count }}</div>
  `,
// actions
  methods: {
    increment () {
this.count++
    }
  }
})

state爲驅動應用的數據源，view爲以聲明方式將state映射到視圖，actions爲響應在view上的用戶輸入致使的狀態變化。java

​

當咱們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞。面試

第一，多個視圖依賴於同一狀態。算法

第二，來自不一樣的視圖的行爲須要變動同一狀態。vuex

第一種狀況，傳參的方法對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力。typescript

第二種狀況，咱們會採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝。

能夠把組件的共享狀態抽取出來，以一個全局單例模式管理。這樣，組件樹構成了一個巨大的「視圖」，無論在樹的哪一個位置，任何組件都能獲取狀態或者觸發行爲。

經過定義和隔離狀態管理中各類概念並經過強制規則維持視圖和狀態間的獨立性。

vuex是專門爲vue.js設計的狀態管理庫，以利用vue.js的細粒度數據響應機制來進行高效的狀態更新。

​

每一個vuex應用的核心就是store倉庫，store就是一個容器，包含着大部分的狀態。

vuex的狀態存儲是響應式的，當vue組件從store中讀取狀態的時候，若是store中的狀態發生變化，那麼相應的組件也會相應地獲得更新。

不能直接改變store中的狀態，改變store中的狀態的惟一途徑就是顯式地提交commit mutation，能夠方便跟蹤每個狀態的變化。

Store的認識

安裝Vuex後，讓咱們來建立一個store。

const store = new Vuex.Store({
state: {
  count: 0
 },
mutations: {
  increment(state) {
   state.count++
  }
 }
})

能夠經過store.state來獲取狀態對象，而後經過store.commit方法觸發狀態的變動。

store.commit('increment');


console.log(store.state.count);

經過提交mutation的方式，而非直接改變store.state.count。

核心概念：State，Getter，Mutation，Action，Module。

State單一狀態

<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
            {{ count }}
</div>
<script src="index.pack.js"></script>
</body>
</html>

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);


const store = new Vuex.Store({
state: {
count: 0
    }
});


new Vue({ 
el: '#app',
    store,
computed: {
        count () {
return this.$store.state.count
        }
    }
});

單一狀態樹，用一個對象包含了所有的應用層級狀態。

// 建立一個 Counter 組件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}

const app = new Vue({
  el: '#app',
// 把 store 對象提供給 「store」 選項，這能夠把 store 的實例注入全部的子組件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

經過在根實例總註冊store，該store實例會注入根組件下的全部子組件中，且子組件能經過this.$store訪問到。

const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}

mapState輔助函數

// 在單獨構建的版本中輔助函數爲 Vuex.mapState
import { mapState } from 'vuex'


export default {
// ...
  computed: mapState({
// 箭頭函數可以使代碼更簡練
    count: state => state.count,


// 傳字符串參數 'count' 等同於 `state => state.count`
    countAlias: 'count',


// 爲了可以使用 `this` 獲取局部狀態，必須使用常規函數
    countPlusLocalState (state) {
return state.count + this.localCount
    }
  })
}

當映射的計算屬性的名稱與 state 的子節點名稱相同時。

computed: mapState([
// 映射 this.count 爲 store.state.count
'count'
])

對象展開運算符

mapState函數返回的是一個對象。

computed: {
  localComputed () { /* ... */ },
// 使用對象展開運算符將此對象混入到外部對象中
  ...mapState({
// ...
  })
}

Getter

computed: {
  doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
  }
}

getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。

const store = new Vuex.Store({
state: {
todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
    }
  }
})

經過屬性訪問

Getter會暴露store.getters對象。

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

getters: {
// ...
  doneTodosCount: (state, getters) => {
return getters.doneTodos.length
  }
}


store.getters.doneTodosCount


computed: {
  doneTodosCount () {
return this.$store.getters.doneTodosCount
  }
}

經過方法訪問

getters: {
// ...
  getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2)

mapGetters輔助函數

mapGetters輔助函數僅僅是將store中的getter映射到局部計算屬性。

import { mapGetters } from 'vuex'


export default {
// ...
  computed: {
// 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
    ])
  }
}

mapGetters({
// 把 `this.doneCount` 映射爲 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})

vuex，vue自己自帶有store模式，其實就是全局註冊一個對象，實現數據共享，適合小型數據少的項目。

vuex的五大核心，state，getters，mutations，actions，module。

vuex四大輔助函數，mapState，mapGetters，mapMutations，mapActions。

vuex的工做流程

客戶端操做事件，dispatch調用一個action。

對應的action處理參數，好比接口，邏輯操做，傳值，commit的type類型，mutation介紹type類型觸發對象的函數，修改state，state更新後中view視圖在render的做用下從新渲染。

​

mapState和mpaGetter的使用只能在computed計算屬性中。

mapMutations和mapActions使用的額時候只能在methods中調用。

<script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
export default {
  data(){
    return{


    }
  },
  computed:{
    ...mapState({
      counts:(state) => state.count
    }),
    
    //mapState就等於下面這個
    
    // counts(){
    //   return this.$store.state.count
    // },
    
    ...mapGetters({
      getternum:'doneTodos'
    }),
    
    //mapGetters就等於下面的這個
    
    // getternum(){
    //   return this.$store.getters.doneTodos
    // }


  },
  methods:{
  
    ...mapMutations({
      addnum:'addNum'
    }),
    
    //mapMutations就等於下面的這個
    
    // addnum1(){
    //   this.$store.commit('addNum')
    // },
    
    ...mapActions({
      actionnum:'actionNumAdd'
    }),
    
    //mapActions就等於下面的這個
    
    //  actionnum6(){
    //   this.$store.dispatch('actionNumAdd')
    // }
    
  }
}
</script>

調用

方法

輔助函數

state

this.$store.state. xxx

mapState

getters

this.$store.getters. xxx

mapGetters

mutations

this.$store.cmmit(（xxx）

mapMutations

actions

this.$store.dispatch（xxx ）

mapActions

states.js

const state =  {
    count:0
}
export default state

getter.js

const getters =  {
    docount:(state,getters) => {
        return state.counts
    } 
}
export default getters

Mutation

更改vuex的store中的狀態的惟一方法是提交mutation。每一個mutation都有一個字符串的事件類型和一個回調函數。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變動狀態
      state.count++
    }
  }
})

store.commit('increment')

提交載荷

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

載荷大多數是一個對象

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

對象風格的提交

store.commit({
  type: 'increment',
  amount: 10
})


mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

對象展開運算符

state.obj = { ...state.obj, newProp: 123 }

在組件中提交Mutation

this.$store.commit('xxx')


使用 mapMutations 輔助函數


將組件中的 methods 映射爲 store.commit 調用

import { mapMutations } from 'vuex'


export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 將 `this.increment()` 映射爲 `this.$store.commit('increment')`


      // `mapMutations` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 映射爲 `this.$store.commit('increment')`
    })
  }
}

在vuex中，mutation都是同步事務：

store.commit('increment')
// 任何由 "increment" 致使的狀態變動都應該在此刻完成。

Action，action提交的是mutation，而不是直接變動狀態。action能夠包含任意異步操做。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

分發action

action經過store.dispatch分發觸發：

store.dispatch('increment')

能夠在action內部執行異步操做。

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

actions支持載荷方式和對象方式：

// 以載荷形式分發
store.dispatch('incrementAsync', {
  amount: 10
})


// 以對象形式分發
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

在組件中分發action

this.$store.dispatch('xxx') 分發 action


使用 mapActions 輔助函數將組件的 methods 映射爲 store.dispatch 調用

import { mapActions } from 'vuex'


export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 將 `this.increment()` 映射爲 `this.$store.dispatch('increment')`


      // `mapActions` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 將 `this.add()` 映射爲 `this.$store.dispatch('increment')`
    })
  }
}

module

vuex將store分割成模塊，每一個模塊擁有本身的state,mutation,action,getter。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}


const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}


const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})


store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

login.vue

<view class="input-content">
  <view class="input-item">
    <text class="tit">用戶名</text>
    <input v-model="query.username" placeholder="請輸入用戶名" />
  </view>
  <view class="input-item">
    <text class="tit">密碼</text>
    <input  v-model="query.password" placeholder="8-18位不含特殊字符的數字、字母組合" maxlength="20"
     password @confirm="toLogin" />
  </view>
</view>
<button class="confirm-btn" @click="toLogin" :disabled="logining">登陸</button>

import {
  mapMutations
}
from 'vuex';

mobile: '', // 手機號
password: '', // 密碼
logining: false ,


...mapMutations(['login']),


toLogin() {
this.logining = true;
loginApi(this.query).then(res => {
if(res.data.code === 1) {
this.$api.msg(res.data.msg)
...
}).catch(res => {
this.logining = false;
})
}

store

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)


const store = new Vuex.Store({
  state: { //全局變量定義處
    hasLogin: false, //用戶是否登陸
    userInfo: {}, //用於存放用戶帳戶數據
  },
  mutations: { //全局方法定義處
    login(state, provider) {
 
    },
    logout(state) {
 
    },
  },
  actions: {
    
  }
})


export default store

☆ END ☆

參考文檔來源：vuex官方文檔https://vuex.vuejs.org/zh/

加羣前端交流羣

掃碼,備註 加羣-技術領域-城市-姓名 

​

目前文章內容涉及前端知識點，囊括Vue、JavaScript、數據結構與算法、實戰演練、Node全棧一線技術，緊跟業界發展步伐，將 Web前端領域、網絡原理等通俗易懂的呈現給小夥伴。更多內容請到達達前端網站進行學習：www.dadaqianduan.cn

推薦閱讀

一、你知道多少this，new，bind，call，apply？那我告訴你

二、爲何學習JavaScript設計模式，由於它是核心

三、一篇文章把你帶入到JavaScript中的閉包與高級函數

四、大廠HR面試ES6中的深刻淺出面試題知識點

以爲本文對你有幫助？請分享給更多人

關注「達達前端」加星標，提高前端技能

這是一個有質量，有態度的公衆號

​

​

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程