Introduction to Vuex

Introduction to installation and composition of vuex

Introduction to vuex

vuex is a state management mode for vue.js applications
It uses centralized storage to manage the state of all components of an application.
And with the corresponding rules to ensure that changes occur in a predictable manner

Application scenarios

Rich experience in mobile terminal development and engineering development
uejs, node and widgets have been studied in depth

Multiple views depend on the same state
Behaviors from different views need to change the same state

vue installation and composition

state
data warehouse

getter
Used to obtain data.

mutation
Used to modify data.

action
Used to commit mutation

Install vuex

Install vuex package, npm install vuex

Create a vuex instance: new Vuex.store()

Mount vuex instance on vue object in main.js

Install vuex in action

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

Introduction to count++

state
Create count field in

mutations
Create a mutation in count++.

button
New click event triggers mutation to change count

count + + Actual Warfare

const store = new Vuex.store({
 state: {
  count: 0
 },
 mutations: {
  countIncrease(state) {
   state.count++
  }
 // Second
 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 Membership
vip member
Senior Members

function

Controlling user login routing restrictions through state.userInfo
Multi-component sharing state.userStatues and state.vipLevel States
Multi-component modification of state.userStatus and state.vipLevel

index.js

const store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions
})

Vue.use(Vuex)

exprot default store;

store file

action.js
getter.js
index.js
mutations.js
state.js

Login permissions

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 the content of this number is not in place (such as copyright or other issues), please contact us in time to rectify it, and it will be dealt with at the first time.

Praise me, please! Because your approval / encouragement is my greatest motivation to write!

Welcome your attention Dashu Xiaosheng A short book!

This is a quality, attitude blog