©2020-2024 ioDraw All rights reserved
<> concept
Vuex It's a program for Vue.js
State management mode of application development . It uses centralized storage to manage the state of all components of the application , The corresponding rules ensure that the state changes in a predictable way .
<> install
* HTML Used in script Label introduction <script src="vue.js"></script> <script src="vuex.js"></
script>
* Vue Used in the project npm Download and install （ Installation required Node Environmental Science ） // download npm install vuex --save // install import
Vuefrom 'vue' import Vuex from 'vuex' Vue.use(Vuex)
<>Vuex Diagram
Vuex And simple global object has the following two differences ：
* Vuex The state storage is responsive . When Vue Component from store When reading status in , if store
The state of the system changes , Then the corresponding components will be updated efficiently .
* It can't be changed directly store Status in . change store The only way to do this is to explicitly commit (commit)
mutation. This makes it easy to track every state change , So that we can implement some tools to help us better understand our application .
Store
every last Vuex The core of application is store（ Warehouse ）.“store” It's basically a container , It contains most of the states in your application (state).
State
Data source driving application , Used to save common data for all components ..
Getter
You can getter Understand as store Calculation properties of , getters
The return value of is cached according to its dependency , And it is recalculated only when its dependency value changes .
Mutation
mutations Object holds the callback function of the changed data , The official name of this function is type, The first parameter is state, The second parameter is payload,
That is, custom parameters .mutation Must be a synchronous function .mutations The method in the object needs to use store.commit call
Action
Action Submitted mutation Instead of changing state directly .action Can contain any asynchronous operation .actions The method in the object needs to use
store.dispatch call .
Action Function accepts an and store Instances with the same methods and properties context object , So you can call context.commit Submit a
mutation, Or by context.state and context.getters To get state and getters.
Module
Due to the use of a single state tree , All the states of the application are concentrated on a relatively large object . When the application becomes very complex ,store The object is likely to become quite bloated . In order to solve the above problems ,Vuex
Allow us to store Split into modules （module）. Each module has its own
state,mutation,action,getter, Even nested submodules —— Split in the same way from top to bottom .
<>HTML in vuex Use of
<body> <div id="app"> <input type="button" value="+" @click="add"> {{this.
$store.state.count}} <input type="button" value="-" @click="reduce"> {{this.
$store.getters.synchro}} <input type="button" value=" Change to 10" @click="changeNum">
</div> <script src="vue.js"></script> <script src="vuex.js"></script> <script>
var store = new Vuex.Store({ state: { count: 0 }, getters: { synchro(state) {
return state.count } }, mutations: { increment(state) { state.count++ },
inreduce(state) { state.count-- }, inchange(state, num) { state.count = num } },
actions: { change(context, num) { context.commit('inchange', num) } } }) new
Vue({ el: '#app', store, methods: { add() { this.$store.commit('increment') },
reduce() { this.$store.commit('inreduce') }, changeNum() { this.$store.dispatch(
'change', 10) } } }) </script> </body>
<>Vue In the project vuex Use of （ two types ）
* hold vuex Write in main.js In the file import Vue from 'vue' import App from './App' import
routerfrom './router' import Vuex from 'vuex' // Global state management Vue.use(Vuex) Vue.config
.productionTip = false var store = new Vuex.Store({ state: { num: 0 }, mutations
: { changeNum(state, num){ state.num += num } } }) new Vue({ el: '#app', store,
router, components: { App }, template: '<App/>' })
Invoke in component
<template> <div> <input type="button" value=" change count Value of " @click="change"> {{this
.$store.state.count}} <div> </template> <script> export default { name: '', data
() { return { } }, methods: { change() { this.$store.commit('changeNum', 10) } }
} </script>
* hold vuex separate from
stay src Create a vuex catalog , newly build modules catalog and index.js file put to vuex Under the directory
stay main.js Introduced in the document vuex catalog
import Vue from 'vue' import App from './App' import router from './router'
import store from './vuex' Vue.config.productionTip = false /* eslint-disable
no-new */ new Vue({ el: '#app', store, router, components: { App }, template:
'<App/>' })
stay index.js Write the following code in
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) let modules = {}
const requireAllModules = require.context("./", true, /\.js$/) requireAllModules
.keys().forEach(key => { let module = requireAllModules(key).default if (module
&& module.name && module.namespaced) { modules[module.name] = module } }) export
default new Vuex.Store({ modules: modules, strict: process.env.NODE_ENV !==
"production" })
stay modules Under the directory newly build city.js file , The code is as follows
export default { name: "city", namespaced: true, state: { cityName: '' },
getters: { getState(state) { return state } }, mutations: { changeCity(state,
cityName) { state.cityName = cityName } } }
Setting values in components
<template> <div> <ul> <li v-for="item in city" @click=
"handChangeCity(item.name)"></li> </ul> </div> </template> <script> import {
mapMutations} from 'vuex' // introduce vuex export default { name: "city", data() {
return { city: [ { id: 1, name: ' Beijing ' } { id: 2, name: ' Shanghai ' } { id: 3, name: ' Guangzhou '
} { id: 4, name: ' Shenzhen ' } { id: 5, name: ' Xiamen ' } ] } }, methods: { // modify ...
mapMutations({ changeCity: "city/changeCity" }), handChangeCity(cityName) { this
.changeCity(cityName) } } } </script>
Use it in another component
<template> <div> <span>{{this.getState.cityName}}</span> </div> </template> <
script> import { mapGetters} from 'vuex' // introduce vuex export default { data() {
return { } }, computed: { ...mapGetters({ getState: "city/getState" }) } } </
script>
Technology