vuex基本使用

一、基本原理

二、基本使用

1.store.js

包含五个属性

• state 储存数据的属性
• getters 相当于计算属性
• moudles 模块化
• mutations只接受数据state 同步操作数据
• actions 进行异步操作

// 创建store的基本操作数据的同步方法 和异步方法

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

import modlueA from './mudleA'
import modlueB from './moudleB'

/*
    state 数据储存
    getters 相当于计算属性 当数据改变的时候 会根据他的返回值将结果储存起来 就收被操作的数据
    mutation 进行同步操作的函数 接收一个数据 接收被操作的数据
    active 进行异步操作的函数 接收contextdata两份个数据
    modules 子模块 通过store.state.模块名

    store.commit()执行同步的函数
    store.dispatch() 执行异步的函数 
    store.gettrers() 执行计算属性

    模块化中子模块是挂在在 state的属性中 可以通过this.$store.state. 属性   直接进行访问模块下面的属性
    可以通过两种方式去直接的请求属性的值
       1. import {mapState} from 'store 
       2. 绑定在原型上面 this.$store

*/

export default new Vuex.Store({
    state:{
        count:41
    },
    getters:{

    },
    
    mutations:{
        updateCount(state,data){
            state.count += data;
        }
    },
    actions:{
        asyncUpdate({commit},data){
            commit('updateCount',data)
        }
    },
    modules:{
        modlueA,
        modlueB
    }
})

1. mutations 是可以直接更改state的数据接收两个参数state,data使用的时候不需要传state传数据就行，只能完成同步的方法。
2. actions 进行异步的方法，可以在这里执行异步函数（发送请求）当获取完成数据之后可以执行。注意：不能直接去更改state的数据 必须简介的通过mutations 去更改数据。该函数接收两个参数context,data.如下例子

    mutations:{
        updateCount(state,data){
            state.count += data;
        }
    },
    // 我们要使用commit提交 执行那个mutations函数 直接在 context中解构出commit
    actions:{
        asyncUpdate({commit},data){
            commit('updateCount',data)
        }
    },

2.main.js

挂载store 可以通过this.$store 获取store

import store from './store/index'

Vue.prototype.$store = store;

3.App.vue

<template>
  <div id="app">
   <router-view></router-view>
  </div>
</template>


<script>
  created(){
    this.$store.store.state.属性;
    this.$store.commit.方法名(data);
    this.$store.dispatch.方法名(data);
    
}  
</script>

三、map函数使用

1.map函数

mapState 反射state的值到该组件中

mapmapActions 反射Actions方法到该组件中

mapMutations 反射Mutations 到该组件中

mapGetters 反射计算属性到该组件中

2.基本使用

// 注意映射的位置

methods:{
    // 相当于this.asyncUpdate = this.$store.commit('asyncUpdate')
    ...mapActions(['asyncUpdate']),
    // 相当于this.asyncUpdate = this.$store.dispatch('asyncUpdate')
    ...mapMutations(['asyncUpdate']),
  },
  computed:{
    ...mapState(['count']),
    ...mapGetters(["haha"])
  }     

// 当你使用map函数映射之后 就可以使用
// this.方法名 直接电泳函数
// this.data 直接查看数据

methods:{
    ...mapActions(['asyncUpdate'])
  },
  created(){
    this.asyncUpdate(5)
    this.asyncUpdate(5)
    console.log('----');
    console.log(this.count);
  },