vuex 的使用

vuex基本语法

vuex是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。

使用Vuex的好处：
1、数据的存取一步到位，不需要层层传递
2、数据的流动非常清晰
3、存储在Vuex中的数据都是响应式的
那么我们先来思考一个问题：什么样的数据适合存储到Vuex中？
答案是：需要共享的数据
Vuex的作用就是：频繁、大范围的数据共享
vue官方提供的独立于组件体系之外的，管理公共数据的工具
原文链接：https://blog.csdn.net/m0_70477767/article/details/125155540

vuex 五个概念

state            存放数据
getters          过滤数据
mutations        操作数据 但是不可以异步操作
actions          异步操作 通过调用mutations里的方法去改变state数据
modules          模块化

基本语法使用：
this,$store.state.state中的键
this.$store.getters.getters中的键
this.$store.commit( ' mutations中的方法名 ' )
this.$store.dispatch( ' actions中的方法名 ' )
其中 getters 和 mutations中系统传入参数state
actions系统传入参数context 通过context.commit去调用mutations中的方法改变state中的数据

话不多说 直接上才艺（代码）
本文在此使用单文件方式去使用vuex
1 导入vue 和 vuex 库

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.9/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3"></script>
这里避坑 vue默认vue3版本 vuex默认vuex4版本
vuex4只能在vue3 中使用
vuex3只能在vue2 中使用

2 创建store

    const store = new Vuex.Store({
      state: {
        age: 11,
        sex: 1,
      },
      getters: {
      //这里的state为系统传入的
      //sexFiltter过滤state中数据
        sexFiltter(state) {
          return state.sex == 1 ? "男" : "女";
        },
      },
      mutations: {
       //这里的state为系统传入的
      //addAge改变state中数据
        addAge(state) {
          console.log("mutations");
          state.age++;
        },
      },
      actions: {
      //这里的context为系统传入 
      //addAge通过调用mutations中的方法去修改数据
        addAge(context) {
          console.log("actions");
          context.commit("addAge");
        },
      },
    });

3 挂载到vue中

    new Vue({
      el: "#app",
      store,
    });

vuex基本语法传递参数

state 与 getters 在computed中写 mutations 与 actions 在methods中写

<div id="app">
      <h1>{{$store.state.age}}</h1>
      <h1>{{$store.getters.sexFiltter}}</h1>
      <hr />
      <button @click="$store.commit('addAge',2)">add</button>
      <button @click="$store.dispatch('addAge',10)">add</button>
</div>

 const store = new Vuex.Store({
      state: {
        age: 11,
        sex: 1,
      },
      getters: {
        sexFiltter(state) {
          return state.sex == 1 ? "男" : "女";
        },
      },
      mutations: {
        addAge(state, payload) {
          console.log("mutations");
          state.age += payload;
        },
      },
      actions: {
        addAge(context, payload) {
          console.log("actions");
          context.commit("addAge", payload);
        },
      },
    });
    new Vue({
      el: "#app",
      store,
    });

vuex辅助语法

正常
this,$store.state.state中的键
this.$store.getters.getters中的键
this.$store.commit( ' mutations中的方法名 ' )
this.$store.dispatch( ' actions中的方法名 ' )
辅助语法
...Vuex.mapState({
  键:state=>state.键
})
...Vuex.mapGetters({
  键:'getters中的键'
})
...Vuex.mapMutations({
  键:'mutations中的键'
})
...Vuex.mapActions({
  键:'actions中的键'
})


const store = new Vuex.Store({
      state: {
        age: 1,
        sex: 1,
      },
      getters: {
        sexFiltter(state) {
          return state.sex === 1 ? "男" : "女";
        },
      },
      mutations: {
        addAge(state, payload) {
          state.age += payload.num;
        },
      },
      actions: {},
    });
    new Vue({
      el: "#app",
      store,
      computed: {
        sexFiltter() {
          return this.$store.state.sex;
        },
        age() {
          return this.$store.state.age;
        },
      },
      methods: {
        fn() {
          this.$store.commit("addAge", { num: 5 });
        },
      },
    });

vuex模块化

当我们数据很多很大的时候，数据的管理不是很好，我们将不同数据分门别类的进行管理
一个模块的数据放一起，
此时modules中有个键 namespaced 就是将modules中的键与公共仓库的键区分的关键

<div id="app">
      <h3>这是公共的</h3>
      {{newage}}
      <button @click="fn({num:1})">anniu</button>
      <h3>
        a模块 {{newage1}}
        <button @click="fn1({num:11})">anniu</button>
      </h3>
      <h3>
        b模块 {{bage}}
        <button @click="fn2({num:22})">anniu</button>
      </h3>
    </div>

  <script>
    const b = {
      namespaced: true,
      state: { age: 111 },
      mutations: {
        changeAge(state, payload) {
          state.age = parseFloat(state.age) + payload.num;
        },
      },
    };
    const store = new Vuex.Store({
      state: {
        age: 1,
        sex: 1,
      },
      getters: {
        changeSex(state) {
          return state.sex == 1 ? "男" : "女";
        },
      },
      mutations: {
        addAge(state, payload) {
          state.age = parseFloat(state.age) + payload.num;
        },
      },
      actions: {},
      modules: {
        a: {
          namespaced: true,
          state: { age: 11 },
          mutations: {
            changeAge(state, payload) {
              state.age = parseFloat(state.age) + payload.num;
            },
          },
        },
        b,
      },
    });
    new Vue({
      el: "#app",
      data: {
        age: 1,
      },
      store,
      computed: {
        ...Vuex.mapState({
          newage: (state) => state.age,
        }),
        ...Vuex.mapState({
          newage1: (state) => state.a.age,
          bage: (state) => state.b.age,
        }),
      },
      methods: {
        ...Vuex.mapMutations({
          fn: "addAge",
          fn1: "a/changeAge",
          fn2: "b/changeAge",
        }),
      },
    });
  </script>

听空天院的大佬同学说现在流行pinia了，等我学学下次更新
下次准备更新一个系列
仿照element-admin后台系统 从 0 =》1 完成并上线