vuex learning chapter

Use of vuex

---

---

Preface

Usage scenarios of vuex: If there are multiple codes that need to be reused in the project, you can use vuex. Moreover, vuex data is responsive. As long as you modify it, it will be updated directly wherever it is used on the page. It is simpler than local storage.

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. What is vuex?

Concept: It is a centralized state manager (the data to be shared between components is stored here).

2. Usage steps

1. Install vuex

npm i vuex -S

2. Use vuex

1. Check whether the download in the project is successful (package.json)
2. After success, the corresponding files will not be directly generated in the project and need to be added manually. In src/store/index.js
   
   注：一般情况下，拿到的项目中都存在vuex可直接使用

Case(Counter)

// 1. 导入vuex依赖包
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)

// 2. 创建store对象
 const store = new Vuex.Store({
    
    
   state:{
    
    
     count:10
   },
   mutations:{
    
    
     reducenum:(state,data=1)=>{
    
    
      state.count -= data
    }
  },
  actions:{
    
    
     reducenumSunc:(context,data)=>{
    
    
      setTimeout(()=>{
    
    
        context.commit('reducenum',data)
      },2000)
    },
    getters:{
    
    
      username:state => state.userinfo.username
   }
 })
 //3.暴露实例对象
 export default store

4. Import the store instance globally in main.js, remember to mount it on the vue instance

import store from './store'

// 挂载到vue实例上
new Vue({
    
    
  store
}).$mount('#app')

5. Here comes the key point, the reading method

---

// 读取方式1：$store.state.属性名
eg：$store.state.count
// 读取方法2：
// 1.导入vuex的辅助函数
// 2.将state里面的数据映射为当前组件的计算属性
eg：import {
    
     mapState } from 'vuex';
	...mapState(['count'])
// 修改state方法1：$store.commit('mutations方法名',实参)
eg：$store.commit('reducenum',data)
// 修改state方法2：
// 1.导入辅助函数mapMutations
// 2.将mutations里面的方法映射为当前组件方法
eg：import {
    
     mapMutations } from 'vuex';
	...mapMutations(['reducenum']),
// 触发actions方法1:  $store.dispatch('actions方法名',实参)
eg：$store.dispatch('reducenumSunc',data)
// 触发actions方法2:
// 1.导入辅助函数mapActions
// 2.将mutations里面的方法映射为当前的组件方法
eg：import {
    
     mapActions } from 'vuex';
	...mapActions(['reducenumSunc'])
// 读取getters方式1: $store.getters.属性名
eg：$store.getters.username
// 读取getters方法2: 
// 1.导入vuex里面的辅助函数mapStste 
// 2. 将getters里面的数据映射为当前组件的计算属性
eg：import {
    
     mapGetters } from 'vuex';
	...mapGetters(['username'])
	

---

结合这张图 来进行理解

Summarize

注意：mutations是修改修改state的唯一方式(同步)，而actions是间接修改state方式(异步）

Vuex separates the status management of single pages and the status management of multiple pages. For single-page state management, only State View Actions exist to perform various operations. Multi-page state management is as shown in the figure above. It can be understood that multiple attempts rely on the same state. When a state changes, multiple interfaces need to be updated.

Okay, today I will learn this next article about learning vuex modules. I hope today’s learning can be helpful to you. Remember to support me!

Previous articles: uniapp image preview implementation