Vuex Profile
This section describes the installation and vuex
vuex Profile
vuex is a specialized application vue.js ON state management
which uses the status of all components centralized storage management application
and a corresponding rule ensures a predictable manner changes
Scenarios
Mobile-side development and engineering development has extensive experience
uejs, node and applet-depth study
A plurality of views dependent on the state of the same
acts to change from different views of the same state
This section describes the installation and vue
state
data warehouse
getter
used to obtain data
mutation
used to modify the data
action
to submit mutation
Installation vuex
Vuex installation package, npm install vuex
Creating vuex Examples: new Vuex.store ()
Main.js vuex instance will mount to the object vue
Installation vuex combat
vue create vuex-demo
cd vuex-demo
code .
npm serve
yarn add vuex
main.js
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store({
state: {
count: 0
}
})
yarn serve
count ++ Introduction
state
created in the count field
mutations
in the mutation to create a count ++
button
to add a click event triggers mutation change count
count ++ combat
const store = new Vuex.store({
state: {
count: 0
},
mutations: {
countIncrease(state) {
state.count++
}
// 第二种
countIncrease(state, v) {
state.count = v
}
}
})
new Vue({
store,
render: h=> h(App)
}).$mount("#app")
App.vue
<template>
<div id="app">
<h1>count: {{this.$store.state.count}}</h1>
<h1>count:{{count}}</h1>
<button @click="countIncrease"></button>
</div>
</template>
methods: {
countIncrease() {
const v=100;
this.$store.commit('countIncrease', v)
}
}
analysis
Account login
Different courses require different membership levels
ordinary members
vip member
senior member
Features
By controlling user login state.userInfo routing restrictions
multiple components share state.userStatus state.vipLevel state and
multi-component modifications and state.vipLevel state.userStatus
index.js
const store = new Vuex.Store({
state,
getters,
mutations,
actions
})
Vue.use(Vuex)
exprot default store;
store files
action.js
getter.js
index.js
mutations.js
state.js
Login rights
store
index.js
state.js
mutations.js
// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store({
state,
mutations
})
export default store
main.js
import Vue from "vue"
import App from "./App.vue"
import Vuex from "vuex"
import router from "./router"
import store from "./store"
Vue.config.productionTip = false
Vue.use(Vuex)
state.js
export default {
userInfo: ""
}
main.js
Vue.prototype.$store = store
router.beforeEach((to, next) => {
console.log(store.state, "store.state")
if (store.state.userInfo || to.path('./login')) {
next()
} else {
next({
path: "/login"
})
}
})
state.js
export default {
userInfo: "",
userStatus: "",
vipLevel: ""
}
If this number of local contents do not get bits (for example: to copyright or other problems), please contact us for rectification can be timely and will be processed in the first time.
Please thumbs up! Because you agree / encouragement is the greatest power of my writing!
Welcome attention of niche t- Jane books!
This is a quality, attitude blog