vueテクノロジースタック開発実戦--学習ノート2

2    

    レンダーコンポーネント(Render Components)
ルーティングオブジェクト
path
component/components
children:[
{サブセット}
]
nameネーミング:to="{name:'about'}"
alias  
redirect:to=>'/'リダイレクト
path: '/argu/:name'     $route.params.name
this.$router
.back() / .go(-1)
.push({
name: `argu`,
params: {
name: 'lison'
}) 
.push({
path: `/argu/$(name)`
})
.replace()
3ルーティングステップ
props:trueコンポーネントに を す
props: {
food: 'banana'
},
/?food=xxxx
props: route => ({
food: route.query.food
}),
* 1. ナビゲーションがトリガーされました
* 2.   なコンポーネント( れようとするページコンポーネント)で、ガードbeforeRouteLeaveを び します。
* 3. グローバル・フロント・ガードbeforeEachを び す
* 4.    されたコンポーネントでbeforeRouteUpdateを び す
* 5. ルーティング  のガードbeforeEnterを び す
* 6.    ルーティングコンポーネントの  
* 7. アクティブ されたコンポーネント(アクセスするページコンポーネント)でbeforeRouteEnterを び す
* 8. グローバルの  ガードbeforeResolveを び す
* 9. ナビゲーションが  されました
* 10. グローバルバックグラウンドガードafterEachを び す
* 11. DOM  のトリガー
* 12.   したインスタンスでbeforeRouterEnterガードからnextに されるコールバック  を び す
meta: {
title:'メタ  '
}
router.beforeEach((to, from, next) => {
to.meta && setTitle(to.meta.title)
})
toオブジェクトがジャンプします
fromオブジェクトが れたページ
next  ジャンプ
5 vuex-state_getter
this.$store.state.user.userName
const getters = {
appNameWithVersion: (state) => {
return `${state.appName}v2.0`
}
}
import{mapState,mapGetters}from'vuex'//    が いていません
computed:{
...mapState('オブジェクトを  ')//userName:state=>state.user.userName
...mapGetters([
'appNameWithVersion',
]),
}
6 vuex-mutation_action_module
import { mapMutations, mapActions } from 'vuex'
const mutations = {
SET_APP_NAME (state, params) {
state.appName = params
},
}
async updateAppName ({ commit }) {
try {
const { info: { appName } } = await getAppName()
commit('SET_APP_NAME', appName)
} catch (err) {
console.log(err)
}
}
methods: {
...mapMutations([//  ]
'SET_APP_NAME'
]),
...mapActions([//   ]
'updateAppName'
]),
handleChangeAppName () {
this.$store.commit({
type: 'SET_APP_NAME',
appName: 'newAppName'
}),
this.SET_APP_NAME({
appName: 'newAppName'
}),
this.$store.dispatch('updateAppName', '123')
}
}
vue.set(state,'appVersion','v 2.0')/state   に  がない  はsetを  する  がありますset,getメソッドを  します
7 vuex_プラグイン_   ストレージ
export default store => {
if (localStorage.state) store.replaceState(JSON.parse(localStorage.state))
store.subscribe((mutation, state) => {
localStorage.state = JSON.stringify(state)
})
}
plugins:[saveInLocal]//  
  モード//オープン 、stateを    すると、エラーが  します
strict: process.env.NODE_ENV === 'development',
//バインド はstoreの   バインドです
stateValue: {
get () {
return this.$store.state.stateValue
},
set (val) {
this.SET_STATE_VALUE(val)
}
},
8 ajax_ドメイン _パッケージaxios_リクエスト
バックエンドによるドメイン の  
export const getUserInfo = ({ userId }) => {
return axios.request({
url: '/getUserInfo',
method: 'post',
data: {
userId
}
})
}
getInfo () {
getUserInfo({ userId: 21 }).then(res => {
console.log('res: ', res)
})
}
14ログイン、ログイン、JWT  
handleSubmit () {
this.login({
userName: this.userName,
password: this.password
}).then(() => {
console.log('success!!')
this.$router.push({
name: 'home'
})
}).catch(error => {
console.log(error)
})
}
15  レイアウト
iview-loader
*Layout:コンテナをレイアウトし、その にHeaderSiderContentFooterまたはLayout  をネストし、  の コンテナに  できます。
*Header:  のレイアウトには、デフォルトのスタイルがあり、その には  の  がネストされ、Layoutにのみ  されます。
*Sider:サイドバーには、デフォルトのスタイルと    があり、その には  の  がネストされ、Layoutにのみ  されます。
*Content:コンテンツ  には、デフォルトスタイルが  しており、その には  の  がネストされ、Layoutにのみ  されます。
*Footer:   のレイアウトには、デフォルトのスタイルがあり、その には  の  がネストされ、Layoutにのみ  されます。
*rowを  して    に を  
*rowにcolのセットを  
* colに、  の  を  します。
*colのspanパラメータを  することで、1～24の  を  します。
*rowごとのcolの  は24である  があります。
21 formフォーム
  フォーム
ダイナミックフォーム
22アクセス   
ルーティング  
data: {
token: 'xxx',
rules: {
page: {
home:true//ページ
},
component: {
edit_button: true,
publish_button: false
}
}
}
export const routes = [
{
path: '/login',
name: 'login',
component: () => import('@/views/login.vue')
},
{
path: '*',
component: () => import('@/views/error_404.vue')
}
]
----------------------------------------------------------------
import { login, authorization } from '@/api/user'
import { setToken } from '@/lib/util'
const state = {
userName: 'Lison',
rules:{}//コンポーネント    ストレージ
}
const mutations = {
SET_RULES (state, rules) {
state.rules = rules
}
}
const actions = {
authorization ({ commit }, token) {
return new Promise((resolve, reject) => {
authorization().then(res => {
if (parseInt(res.code) === 401) {
reject(new Error('token error'))
} else {
setToken(res.data.token)
resolve(res.data.rules.page)
commit('SET_RULES', res.data.rules.component)
}
}).catch(error => {
reject(error)
})
})
}
}
-------------------------------------------------------------------
import { routes, routerMap } from '@/router/router'
const state = {
routers: routes,
hasGetRules: false
}
const mutations = {
CONCAT_ROUTES (state, routerList) {
state.routers = routerList.concat(routes)/  ルーティング
state.hasGetRules=true//ルーティング  が  されました
}
}
const getAccesRouterList = (routes, rules) => {
return routes.filter(item => {
if (rules[item.name]) {
if (item.children) item.children = getAccesRouterList(item.children, rules)
return true
} else return false
})
}
const actions = {
concatRoutes ({ commit }, rules) {
return new Promise((resolve, reject) => {
try {
let routerList = []
if (Object.entries(rules).every(item => item[1])) {
routerList = routerMap
} else {
routerList=getAccesRouterList(routerMap,rules)/アクセス  なルーティングリスト
}
commit('CONCAT_ROUTES',routerList)/ルーティングの  
resolve(routerList)
} catch (err) {
reject(err)
}
})
}
}
---------------------------------------------------
if (!store.state.router.hasGetRules) {
store.dispatch('authorization').then(rules => {
store.dispatch('concatRoutes', rules).then(routers => {
router.addRoutes(clonedeep(routers))
next({ ...to, replace: true })
}).catch(() => {
next({ name: 'login' })
})
})
}
--------------------------------------------------
コンポーネント