1. Questions and methods related to Vuex are as follows:
-
The concept and function of vuex
-
Five cores of vuex and corresponding concepts
-
Installation of vuex
-
Usage scenario of vuex
-
How to use Vuex
-
Vuex Operation mechanism of
-
Data persistence in vuex
-
Introduction and method of vuex --- mapping
-
And the modularization of vuex
1. Concept of vuex
- Vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way.
- To put it bluntly, vuex is a library for managing data status in vue.js. It creates a centralized data store for all components in the program to access.
2.Vuex five core concepts
- 1. State all data is stored in state, which is an object
- 2. Changes can directly manipulate the data in state
- 3. actions can only call the methods of changes
- 4. getters is similar to calculating attributes, and implements some logical operations on the data in state
- 5. Modules stores the warehouse in modules
3. Installation of vuex
Command:
cnpm install vuex --save
4. Usage scenario of vuex
- If you need to build a medium and large-scale single page application, you are likely to consider how to better manage the state outside the component. Vuex will become a natural choice.
- Status between components in a page application
5. Use of vuex
- Create a new store folder under src
- Create a new file index.js in the folder
- Write in store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //Storage of shared data msg:"Zhang Bo has been with me for 7 months", num:15, isshow:true }, mutations: { //Only mutations can change data in state plusOne(state){ //State is used to read data in state state.num++ }, }, actions: { }, getters:{ } })
- state is used to store shared data
-
export default new Vuex.Store({ state: { //Storage of shared data msg:"Zhang Bo has been with me for 7 months", num:15, isshow:true }, mutations: { }, actions: { }, getters:{ } }) - The data in state is used in the component
-
{{$store.state.msg}} //js this.$store.state.xx - Changes: only changes can change data in state
-
export default new Vuex.Store({ state: { //Storage of shared data msg:"Zhang Bo has been with me for 7 months", num:15, isshow:true }, mutations: { //Only mutations can change data in state plusOne(state){ //State is used to read data in state state.num++ } }, actions: { }, getters:{ } }) - Modify data with parameters
-
export default new Vuex.Store({ state: { //Storage of shared data msg:"Zhang Bo has been with me for 7 months", num:15, isshow:true }, mutations: { //Only mutations can change data in state plusN(state,n){ //State is used to read data in state state.num=state.num+n //state.num+=n } }, actions: { }, getters:{ } }) -
Used in components
<button @click="$store.commit('plusN',10)">+N</button>Note: only one parameter can be passed when calling changes. If you want to pass multiple parameters, you need to use the object
-
export default new Vuex.Store({ state: { //Storage of shared data msg:"Zhang Bo has been with me for 7 months", num:15, isshow:true }, mutations: { //Only mutations can change data in state plusAll(state,n){ //State is used to read data in state console.log(n) console.log(n.a) console.log(n.flag) } }, actions: { }, getters:{ } })
- Used in components
-
<button @click="$store.commit('plusAll',{a:12,flag:true})">+N</button>
6.Vuex Operation mechanism of
- Vuex provides data (state) to drive vue components. It dispatches actions through dispath, where asynchronous operations can be performed. Then, it submits changes through commit, and finally changes the state through changes.
7. Data persistence of vuex
How to solve the loss of Vuex page refresh data?
-
The data in vuex is cleared as soon as it is refreshed, so it is necessary to realize persistence of vuex data
-
Using the third-party plug-in vuex persist for persistence
-
1 download third-party plug-ins
cnpm install --save vuex-persist
-
Introduced in store.js
-
import Vue from 'vue' import Vuex from 'vuex' //Persistence import VuexPersistence from 'vuex-persist' const vuexLocal = new VuexPersistence({ storage: window.localStorage }) Vue.use(Vuex) export default new Vuex.Store({ state: { //Storage of shared data carts:[] //Shared cart data }, mutations:{ }, actions:{}, getters:{}, // Persistence plugins: [vuexLocal.plugin] })
8. Introduction to vuex - mapping
The mapping method allows us to use Vuex more concisely and reduce a lot of code
- Changes and actions need to be mapped to methods,
- state and getters need to be mapped to computed
export default new Vuex.Store({
state: {
str: "I'm a reflection of the past state method"
},
mutations: {
fun1(){
console.log("I'm a reflection of the past mutations method")
}
},
actions: {
fun2() {
console.log("I'm a reflection of the past actions method")
}
},
getters: {
haha() {
return "I'm a reflection of the past getters method"
}
},
modules: {}
})
call
<template>
<div id="app">
{{str}} -------- {{haha}}
<br>
<button @click="fun1">mutations</button>
<button @click="fun2">actions</button>
</div>
</template>
<script>
// Introduce various mapping methods
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
name: "App",
methods: {
// Use the extension operator to extend the required method with the following syntax
...mapMutations(["fun1"]),
...mapActions(["fun2"])
},
computed:{
// Use the extension operator to extend the required method with the following syntax
...mapState(["str"]),
...mapGetters(["haha"])
}
};
</script>
Mapping method parameters
export default new Vuex.Store({
state: {
str: "I'm a reflection of the past state method"
},
mutations: {
fun1(state,can){
console.log("I'm a reflection of the past actions method")
console.log(can)
}
},
actions: {
fun2(state,can) {
console.log("I'm a reflection of the past actions method")
console.log(can)
}
},
getters: {
haha() {
return "I'm a reflection of the past getters method"
}
},
modules: {}
})
call
<template>
<div id="app">
<button @click="fun1('mutations')">mutations</button>
<button @click="fun2('actions')">actions</button>
</div>
</template>
<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
name: "App",
methods: {
// The mapping method needs to be written in object format to transfer parameters
...mapMutations({
fun1:"fun1",
}),
...mapActions({
fun2:"fun2"
})
}
};
</script>
9. And the modularization of vuex
-
Create a new store folder under the root directory
-
Right click store to create a new JS file -- store.js
// Import vue and vuex
import Vue from 'vue'
import Vuex from 'vuex'
// Installing vuex as a plug-in to Vue
Vue.use(Vuex)
// Create an instance object of the store
const store =new Vuex.Store({
state:{}
})
// Export the instance object of the store
export default store- Import the instance object of store in main.js and mount it on the instance of vue
//1. Import the instance object of the store
import store from './store/store.js'
const app = new Vue({
...App,
// Mount the store on the vue instance
store
})-
Create a new cart.js in the store directory
-
In cart.js, initialize the vuex module
export default {
// Open namespace for current module
namespaced:true,
state:{
carts:[],
},
mutations:{
setname(state){
}
},
getters:{
}
}- In the store/store.js file, import and mount the vuex module of the shopping cart
// 1Introduce the vuex module of the shopping cart
import cartmodule from './cart.js'
import loginmodule from './login.js'
// Installing vuex as a plug-in to Vue
Vue.use(Vuex)
// Create an instance object of the store
const store =new Vuex.Store({
modules:{
// 2. Adjust the access path of the members in the vuex module of the shopping cart to m_cart
// Read the state data m in the shopping cart module_ cart/carts
cart:cartmodule,
login:loginmodule
}
})- Use the data in the store in my page
<template>
<view>
<view v-for="(item,index) in carts" :key="">
{{item}}
</view>
</view>
</template>
<script>
import {mapState} from 'vuex'
export default {
data() {
return {
};
},
computed:{
// ... mapState('name of module ',' name of data to map '])
...mapState('m_cart',['carts'])
}
}
</script>