walure / vue-note Goto Github PK

vuex
// initial state
const state = {
value: '',
}

// getters
const getters = {
history: state => state.value,
}

// actions
const actions = {}

// mutations
const mutations = {
history (state, data) {
state.value = data
},
}

export default {
state,
getters,
actions,
mutations
}

页面调用 编辑
store.commit('history', {value:0})
调用
store.getters.history.value

async fuc(){

let [res] =await Promise.all([ ])

}

import Vue from 'vue'
import Vuex from 'vuex'
import createPersist from 'vuex-localstorage'
import packageJson from '../../package.json'

import layout from './modules/layout'
import auth from './modules/auth'
import privilege from './modules/privilege'
import historyBack from './modules/historyBack'

Vue.use(Vuex)

const store = new Vuex.Store({
// actions,
// getters,
modules: {
layout,
auth,
privilege,
historyBack
},

strict: process.env.NODE_ENV !== 'production',

// 使用 vuex-localStorage 持久化页面状态
plugins: [createPersist({
namespace: ${packageJson.name}@${packageJson.version}:store,
expires: 7 * 24 * 60 * 60 * 1e3
})]
})

export default store

// initial state
const state = {
value: '',
}

// getters
const getters = {
history: state => state.value,
}

// actions
const actions = {}

// mutations
const mutations = {
history (state, data) {
state.value = data
},
}

export default {
state,
getters,
actions,
mutations
}

子组件
a 文件

父文件
b文件 调用a文件组件

import store from 'store';

store.commit('history', {value: 1}) //设置值

store.getters.history.value // 读取值

vue 精华 --------------------------------------------------

vue router常用

///this.$route 取参数 ，

this.$route.path

//this.$router 调用方法
this.$router.push()

this.$router.replace()

///--------监听对象事件
watch:{
'object.atr':{
handler(v){
console.log(v)
},
deep:true //深度监听
}
}

///-------------------父 传子 子修改父的值

父页面

子页面
props:{
value:{type:String}
}

this.$emit('input',text)

///--------------------------阻止form提交

// 关于 slot 传参

组件页面

调用插入页面 slot-scope 用传参 一定要写

sync

子组件
props:['foo']
this.$emit('update:foo',1111)

v-on

methods:{
update(val){
console.log(val)
}
}
子组件
this.$emit('update',1111)

v-model

子组件
props:{
value:{type:String}
}
this.$emit('input',1111)