Vuex简单理解与使用

vuex概念

用于在vue搭建的大型项目中，进行状态的管理。保证各组件共享状态的一致性。易于管理与维护
共包括state getter mutation action module 共五个实例，至少需要包含state和mutation。

在项目中的目录结构及使用

image.png

一般在项目src文件夹下新建store文件夹。在其中新建index.js文件，在main.js文件中进行引入该文件
写法如下：
main.js

import store from './store'
new Vue({
    router:router,
    store,
  render: h => h(App),
}).$mount('#app')

state

存放在vue组件中的展示状态，在其中定义变量。类似于data。
index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        nickname:'',
        name:'QUAN',
        age:0,
        gender:'',
        money:0
    },
}

组件中接收值

//直接用
$store.state.nickname
//定义在computed中,方法名和属性名必须一致。
computed:{
  nickname(){
      return this.$store.nickname
   }
}
//mapState函数
computed:{
            value(){
                return this.title + '123'
            },
            ...mapState(['nickname','age','name']),
            ...mapGetters(['realname']),
            
        }

getter

getter主要是用来处理state中定义的数据，接收state作为第一个参数。
index.js

getters:{
        realname(state){
            return state.name + state.nickname
        },
    
    }

组件中的使用

//直接用
<div>
                    {{ this.$store.getters.realname }}
                </div>
//mapGetters函数
computed:{
            value(){
                return this.title + '123'
            },
            ...mapState(['nickname','age','name']),
            ...mapGetters(['realname']),
            
        }

mutation

mutation主要用来修改state，通过提交mutation的方式来修改state值。接收state作为第一个参数，其余的参数为载荷。并且mutation只能处理同步函数。使用如下：
index.js

  mutations:{
        setUserInfo(state,payLoad){
            state.nickname = payLoad.nickname
            state.age = payLoad.age
            state.gender = payLoad.gender
            state.money = payLoad.money
        },
        addAge(state,payLoad){
            state.name = state.name + payLoad.character
            state.age += payLoad.number
        }         
    },

组件中的使用:在方法中使用this.store.commit进行提交


 test(){
                this.$store.commit('addAge',{
                    number:2,
                    character:'小可爱'
                })
                
                
            },

action

action类似于mutation，都是用来处理state中定义的数据的。但是不同的地方是action是以提交mutation的的方法来变更状态，并且它可以包含任何异步的操作。接受context参数（context参数与store实例具有相同的方法和属性）
index.js

//setUserInfo写在mutation中，此处用来提交。
actions:{
       async getToken(context){
           context.commit('setUserInfo',{
               nickname:'yuanyuan',
               age:16,
               gender:'nan',
               money:10000000,

           })
       }
    },