1. The following is the understanding of vuex, and the workflow diagram (if you already know it, skip it and see the implementation code)
Vuex is a library for state management developed for Vue.js applications to help manage the flow and sharing of data.
The following is an understanding of some key concepts of Vuex:
-
State : A single State Tree is where the state of the entire application is stored. State is a centralized public data source kept in Vuex and can be
this.$store.stateaccessed via . It is often seen as the application's only source of data. -
Getters : Getters allow new state to be derived from state stored in Vuex. Similar to computed properties in Vue components, Getters can process and compute state, and expose the results to other components.
-
Mutation : Mutation is the only way to modify the state. Mutations must be synchronous functions that change state and track state changes. They need to call the method when submitting
commit, and receive a parameter to pass the data payload (Payload). Only Mutation can modify the state, which ensures the traceability and maintainability of state changes. -
Action : Action is used to handle asynchronous operations or complex operations containing multiple Mutations. Action can contain any asynchronous operation, such as submitting a Mutation to update the state after getting data from the server. Action is triggered by calling the method in the component
dispatch, and can receive a Promise so that the Mutation can be submitted after the asynchronous operation is completed. -
Module : Module allows splitting Vuex into individual modules. Each module has its own state, Getter, Mutation and Action, and can be nested to reference other modules. Organizing code this way allows for better scalability and maintenance, and allows state to be shared between different modules.
By using Vuex, centralized management of the global state can be realized, so that different components can easily share and update the state. It provides a predictable state management mechanism, simplifies the processing and debugging of data streams, and makes application development easier and more maintainable.
2. Official start: first create a store folder, create an index.js file, introduce Vue and Vuex, if you need modular development, import another store warehouse js file created in the index.js folder, and then use modules to The two of them merged.
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)
//创建并暴露store
export default new Vuex.Store({
modules:{
countAbout:countOptions,
personAbout:personOptions
}
}) 3. There are five attributes in the count warehouse, which are divided into actions, mutations, state, getters, and modules
1. Actions are used to process asynchronous operations, such as axios requests, asynchronous operations?
2. Mutations are used to process data.
3. state is used to initialize data
4. getters are similar to calculated attributes, and generally process the processed data
5. modules Modular development
The function received in the actions object can receive two parameters, the first is the context object , the second is the passed data, the method in the mutations can be triggered in the context,
the method in the mutations object can receive two parameters, the first parameter is the data initialized by the state, and the second parameter is the data passed by the action.
//求和相关的配置
export default {
namespaced:true,
actions:{
jiaOdd(context,value){
console.log('actions中的jiaOdd被调用了')
if(context.state.sum % 2){
context.commit('JIA',value)
}
},
jiaWait(context,value){
console.log('actions中的jiaWait被调用了')
setTimeout(()=>{
context.commit('JIA',value)
},500)
}
},
mutations:{
JIA(state,value){
console.log('mutations中的JIA被调用了')
state.sum += value
},
JIAN(state,value){
console.log('mutations中的JIAN被调用了')
state.sum -= value
},
},
state:{
sum:0, //当前的和
school:'不知名',
subject:'前端',
},
getters:{
bigSum(state){
return state.sum*10
}
},
}4. Methods of obtaining data warehouse data or distributing data in the page:
first method: obtaining data or distributing methods through the optimization function of vuex
First introduce four methods, import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
in In computed properties, you can expand mapState and mapGetters to obtain data.
In methods, you can expand mapMutations mapActions to dispatch actions methods, or directly modify the data in mutations
...mapState('countAbout',['sum','school',' subject']), the first parameter means to get data from countAbout in modular modules, the second parameter is to get state data from countAbout file, which is an array method...
mapMutations('countAbout', {increment: 'JIA', decrement:'JIAN'}),
the first parameter is the modular name, the second parameter is a key-value pair, the key is the method triggered in the ui page, and the second parameter is the corresponding one in the mutilation method
<template>
<div>
<h1>当前求和为：{
{sum}}</h1>
<h3>当前求和放大10倍为：{
{bigSum}}</h3>
<h3>我在{
{school}}，学习{
{subject}}</h3>
<h3 style="color:red">Person组件的总人数是：{
{personList.length}}</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">当前求和为奇数再加</button>
<button @click="incrementWait(n)">等一等再加</button>
</div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
name:'Count',
data() {
return {
n:1, //用户选择的数字
}
},
computed:{
//借助mapState生成计算属性，从state中读取数据。（数组写法）
...mapState('countAbout',['sum','school','subject']),
...mapState('personAbout',['personList']),
//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
...mapGetters('countAbout',['bigSum'])
},
methods: {
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
},
mounted() {
console.log(this.$store)
},
}
</script>
<style lang="css">
button{
margin-left: 5px;
}
</style>
5. The method of obtaining data warehouse data or distributing data in the page:
the second method: obtaining data or distributing method in a native way.
The first step is to introduce the store in the entry file and mount it on the vm
, and then you can use it in the Get
the data in the personAbout module through this.$store.state.personAbout on the page
Get the calculated attribute data in the warehouse through this.$store.getters['personAbout/firstPersonName']
Through this.$store.commit('personAbout/ADD_PERSON ', personObj)
to trigger the method commit of mutions in the personAbout warehouse is to directly trigger the function in the mutions method. Generally, this method can be used directly without asynchronous operations,
through this.$store.dispatch('personAbout/addPersonWang', personObj)
Trigger the asynchronous method in the action
main.js file
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store,
beforeCreate() {
Vue.prototype.$bus = this
}
})
person.vue text:
<template>
<div>
<h1>人员列表</h1>
<h3 style="color:red">Count组件求和为：{
{sum}}</h3>
<h3>列表中第一个人的名字是：{
{firstPersonName}}</h3>
<input type="text" placeholder="请输入名字" v-model="name">
<button @click="add">添加</button>
<button @click="addWang">添加一个姓王的人</button>
<button @click="addPersonServer">添加一个人，名字随机</button>
<ul>
<li v-for="p in personList" :key="p.id">{
{p.name}}</li>
</ul>
</div>
</template>
<script>
import {nanoid} from 'nanoid'
export default {
name:'Person',
data() {
return {
name:''
}
},
computed:{
personList(){
return this.$store.state.personAbout.personList
},
sum(){
return this.$store.state.countAbout.sum
},
firstPersonName(){
return this.$store.getters['personAbout/firstPersonName']
}
},
methods: {
add(){
const personObj = {id:nanoid(),name:this.name}
this.$store.commit('personAbout/ADD_PERSON',personObj)
this.name = ''
},
addWang(){
const personObj = {id:nanoid(),name:this.name}
this.$store.dispatch('personAbout/addPersonWang',personObj)
this.name = ''
},
addPersonServer(){
this.$store.dispatch('personAbout/addPersonServer')
}
},
}
</script>
person.js file:
//人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
namespaced:true,
actions:{
addPersonWang(context,value){
if(value.name.indexOf('王') === 0){
context.commit('ADD_PERSON',value)
}else{
alert('添加的人必须姓王！')
}
},
addPersonServer(context){
axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
response => {
context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
},
error => {
alert(error.message)
}
)
}
},
mutations:{
ADD_PERSON(state,value){
console.log('mutations中的ADD_PERSON被调用了')
state.personList.unshift(value)
}
},
state:{
personList:[
{id:'001',name:'张三'}
]
},
getters:{
firstPersonName(state){
return state.personList[0].name
}
},
}