vuex快速入门（详细）--核心点--工作流程机制

vuex

vuex顾名思义是一款为vue而生的状态管理工具。
vue本身自带着store模式，其实就是全局注册一个对象，实现数据共享。适合小型数据量少的项目。
vuex适合复杂的单页面应用，涉及到多层次嵌套，多层次组件传值，不同视图对一个状态或者接口的处理。

一、vuex 的五大核心

1.State
2.Getters
3.Mutations
4.Actions
5.Module
vuex 四大辅助函数 mapState 、mapGetters 、 mapMutations 、mapActions

辅助函数如何使用及其原理链接 https://blog.csdn.net/weixin_43648947/article/details/88995357

二、vuex的工作流程

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

下面是我画的流程图

事件调用 dispatch

state修改 render重新渲染

commit一个type类型

匹配对应type操作state

客户端

Action

State

Mutation

三、vuex项目中的使用

1.首先安装vue项目和vuex
推荐使用npm cnpm yran git
git安装
npm安装
npm
npm install -g vue-cli
vue init webpack hello
npm install vuex --save
yarn
yarn install -g vue-cli
vue init webpack hello
yarn add vuex

安装好的话在package.json里会有对应名字和版本

---

2.新建store文件
在src路径下创建一个store文件，里面创建个index

在main.js的入口文件引入并在new vue中初始化
注意引用的时候不加{ }会报错

---

3.创建基本的vuex结构
在store/index.js中创建基本的vuex结构

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本身
            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);
            }
        }

    })

---

4.接下来就是调用vuex

下面的实例调用都是用的辅助函数，在刚创建好的App.vue实例基础上调用

<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>

显示效果
1.初始值是count 6，用 mapState调用 count = 6
2.用mapGetters调用 并基础加了2，所以第二个count为8，并不影响state的值

3.用mapMutations调用mutations里方法让count累加1，点击触发后state值变7，getters值变9

4.用mapActions调用actions里的方法放count累加6，点击后state值变13，getters值变15

注意如果使用vuex辅助函数，注意我例子中的使用位置，否则会报错

辅助函数如何使用？及其原理链接
https://blog.csdn.net/weixin_43648947/article/details/88995357

深入学习vuex状态管理的拆分及模块化处理 https://blog.csdn.net/weixin_43648947/article/details/88997946

不想复制粘贴代码的直接去github:https://github.com/babybrotherzb/vue2-vuex