vuex的基础使用

Posted 2021-09-17 老张在线敲代码

一. 五大核心

State

存储应用状态数据的对象 类似 data 值可以是对象 或者是返回对象的函数 使用函数的方式 返回对象 每次返回的都是新的实例对象
引用地址不同 state更新了 视图没更新 因为钩子函数未触发导致 computed解决

Getters

state中派生的状态数据 接收state作为第一个参数 第二个为 可选参数

Mutations

提交mutation来修改store中的状态
同步操作 每个mutation都有一个字符串事件类型 ( type ) 与 一个回调函数 (handler ) 在回调函数中修改状态 不能直接调用mutation的回调函数 需要当mutation类型为increment时才能调用此函数 mutation 必须是同步的 在store中初始化时设置好所有的属性

Actions

与 mutations 类似 提交修改state的行为 处理异步操作
提交的是 mutation 不是直接修改状态 可以包含任意 异步操作

Module

将 store 分割成模块 每个模块都有自己的state mutation action getters

Vuex 四大 辅助函数：mapState mapGetters mapMutations mapActions

​ 【PS】mapState 和 mapGetter 只能在 computed 中使用

​ mapMutations 和 mapActions 只能在 methods 中使用 否则会报错

二. 工作流程

客户端操作事件 dispatch调用action 对应的action处理函数
如接口、逻辑操作 传值 commit一个type类型
mutation接收一个type类型触发对应的函数 修改state’值 state更改后 对应的view视图在render的作用下重新渲染

三. 使用

1. 安装

npm i vuex --save    |    yarn add vuex

2. 新建store文件

// /src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
    state : {
        count : 6
    },
    getters : {
        doCount : (state,getters)=>{
            return getters.doneTodos.length
        },
        // getters 中 第一个参数 是 state  第二个参数是 getters本身
    }
}) 

3. 引入文件并初始化

// /src/main.js
// 引入 store
import {store} from './store/index.js';
new Vue({
    el:'#app',
    store,
})

4. 创建基本的vuex结构

// store/index.js 创建vuex结构
import Vue from 'vue';
import Vuex from 'vuex';
Vue.ues(Vuex);
export const store = new Vuex.Store({
    state : {
        count : 6
    },
    getters : {
        doCount: (state, getters) => {
            return getters.doneTodos.length
        },
        //getters里的第一个参数是state，第二个是getters本身
        doneTodos:(state) =>{
            return state.count+2
        }
    },
    mutations : {
    	counts(state, v) {
            state.count = v;
        },
        addNum(state,v) {
            if(v){
                state.count += v
            }else{
                state.count ++
            }
        },
        reduceNum(state) {
            state.count --
        }
	},
    actions : {
        actionNumAdd(v) {
            // axios.get("/customer/user_info").then(res => {
            //     v.commit(addNum, res.data);
            // });
            //这里可以直接掉接口，并赋值，第一个参数是mutation里对应的名字，第二个参数是传的值
            v.commit('addNum', 6);
        },
        actionNumReduce(v) {
            // axios.get("/customer/user_info").then(res => {
            //     v.commit(addNum, res.data);
            // });
            //这里可以直接掉接口，并赋值，第一个参数是mutation里对应的名字，第二个参数是传的值

            v.commit('reduceNum', 6);
        }
    }
})

5. 调用vuex

<!-- 下面的实例调用都是用的辅助函数  -->
<template>
  <div id="app">
    <input v-model="counts" />
    <input v-model="getternum" />
    <button @click="addnum1">mutation+1</button>
    <button @click="actionnum6">action+6</button>
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
export default {
  data(){
    return{

    }
  },
  computed:{
    ...mapState({
      counts:(state) => state.count
    }),
    ...mapGetters({
      getternum:'doneTodos'
    })

  },
  methods:{
    ...mapMutations({
      addnum:'addNum'
    }),
    ...mapActions({
      actionnum:'actionNumAdd'
    }),
    addnum1(){
      this.addnum()
    },
    actionnum6(){
      this.actionnum()
    }
  }
}

</script>

原文链接：https://blog.csdn.net/weixin_42949401/article/details/119896938