vuex Basics

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