浅谈vuex 五大属性传值获取值的方法

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。下载安装新建文件夹store 与main.js同级文件夹下新建index.jsindex.js写入以下代码State 单一状态树（用一个对象就包含了全部的应用层级状态）单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取

猫和老许

2643人浏览 · 2022-06-24 16:29:35

猫和老许 · 2022-06-24 16:29:35 发布

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

在说属性之前要准备好一些文件以及环境（以vue2为例）

下载安装

npm i vuex --S

新建文件夹store 与main.js同级文件夹下新建index.js

index.js写入以下代码

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  // strict: true,// 严格模式
  state: {
    oneComNumber: 10,
  },

  // Action支持异步调用Mutation来修改。  处理一些逻辑业务
  actions: {
    numberAddWait(context, v) {   // 上下文和传过来的值
      setTimeout(() => {
        // context.commit("numberAdd", v)
        context.state.oneComNumber += v // 这样也可以改变state里面的值
      }, 1000);
    },
  },

  // 用于操作一些数据 （state）  也可进行判断
  mutations: {
    numberAdd(state, v) {
      // if (state.oneComNumber % 2) {
      //     console.log(4546546546);
      // }
      state.oneComNumber += v
    },
    numberMinus(state, v) {   // 上下文和传过来的值
      state.oneComNumber -= v
    },


  },
  // 计算属性 辅助函数
  getters: {
    bigOneComNumber(state) {
      return state.oneComNumber * 10
    }
  },
});

State 单一状态树（用一个对象就包含了全部的应用层级状态）

单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

export default new Vuex.Store({ 
    // state 定义数据  在组件都能读取得到
    state: {
        oneComNumber: 10,
    },
})

以下是常用读取数据的方式

store 实例中读取状态最简单的方法就是在计算属性中返回某个状态( )：

  computed: {
    oneComNumber() {
      return this.$store.state.oneComNumber;
    },
  },

然后直接使用即可

  <h1>computed里面的值：{{ oneComNumber }}</h1>

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性（展示方法一样）

import { mapState } from "vuex";  // 需要引入
export default {
  name: "HelloWorld",
  props: {
    
  },
  data() {
    return {};
  },
  created() {
    console.log(this.$store);
  },
  computed: {
    // oneComNumber() {
    //   return this.$store.state.oneComNumber;
    // },

    // 这里是数组形式获取 用于方法名和属性名一样的时候
    ...mapState(["oneComNumber"]), // 展开运算符写入即可

    // 这里是对象形式获取 用于方法名和属性名一样的时候
    // ...mapState({'oneComNumber':'oneComNumber'}), // 展开运算符写入即可
  },
};

Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters 。

  // Action支持异步调用Mutation来修改。  处理一些逻辑业务
  actions: {
    // 这里 就是等一段时间去执行 
    numberAddWait(context, v) {   // 上下文和传过来的值
      setTimeout(() => {
          context.commit("numberAdd", v)
      }, 1000); 
    },
  },

在页面调用时可以直接调用：$store.dispatch('方法名称', 传递的参数)

<button @click="$store.dispatch('numberAddWait', n)">过一会再加</button>

使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

import { mapActions } from "vuex";

export default {

  methods: {
    ...mapActions(["numberAddWait"]),
  },
 
};

在相应区域调用相应方法即可

<button @click="numberAddWait(n)">过一会再加</button>

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

  // 用于操作一些数据 （state）  也可进行判断
  mutations: {
    numberAdd(state, v) {
      state.oneComNumber += v
    },
    numberMinus(state, v) {   // 上下文和传过来的值
      state.oneComNumber -= v
    },
  },

直接调用通过commit('方法名'，参数)调用

 <button @click="$store.commit('numberAdd', n)">+</button>
 <button @click="$store.commit('numberMinus', n)">-</button>

使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用

 <button @click="numberAdd(n)">+</button>
 <button @click="numberMinus(n)">-</button>


methods: {
    // 与上面Actions magActiions用法一致 也有对象传值方法
    ...mapMutations(["numberAdd", "numberMinus"]),
},

Getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如数据进行加工处理例如放大倍数：这个时候可以在computed里面写计算属性，但是为了方便管理 Vuex提供了‘getter’

  // 计算属性 辅助函数
  getters: {
    bigOneComNumber(state) {
      return state.oneComNumber * 10
    }
  },

直接调用进行显示

<h2>{{ $store.getters.bigOneComNumber }}</h2>

`mapGetters` 辅助函数

 <h2>{{ bigOneComNumber }}</h2>

 computed: {
   ...mapGetters(["bigOneComNumber"]),
 },

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

主要用于多个文件/多个store

单个文件添加命名空间进行区别

  namespaced: true,

例如，新建文件oneCom.js

export default {
    namespaced: true, // 空间命名
    state: {
        oneComNumber: 10,
        peoppleList: [
            {
                id: 1,
                name: "张三"
            }
        ],
    },

    // Action支持异步调用Mutation来修改。  处理一些逻辑业务
    actions: {
        numberAddWait(context, v) {   // 上下文和传过来的值
            setTimeout(() => {
                context.commit("numberAdd", v)
                // context.state.oneComNumber += v
            }, 1000);
        },
    },

    // 用于操作一些数据 （state）  也可进行判断
    mutations: {
        numberAdd(state, v) {
            // if (state.oneComNumber % 2) {
            //     console.log(4546546546);
            // }
            state.oneComNumber += v
        },
        numberMinus(state, v) {   // 上下文和传过来的值
            state.oneComNumber -= v
        },


    },
    // 计算属性 辅助函数
    getters: {
        bigOneComNumber(state) {
            return state.oneComNumber * 10
        }

    },
}

index.js

import Vue from "vue";
import Vuex from "vuex";
import oneCom from './oneCom'
Vue.use(Vuex);

export default new Vuex.Store({
  strict: true,// 严格模式
  // 多个模块进行管理 管理多个文件
  modules: {
    oneCom
  }
});

页面.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <button @click="numberAdd(n)">+</button>

    <button @click="numberMinus(n)">-</button>
    <button @click="numberAddWait(n)">过一会再加</button>

    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <h2>{{ oneComNumber }}</h2>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapState } from "vuex";
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      n: 1,
    };
  },
  created() {
    console.log(this);
  },
  methods: {
    ...mapMutations("oneCom", ["numberAdd", "numberMinus"]),
    ...mapActions("oneCom", ["numberAddWait"]),
  },
  computed: {
    ...mapState("oneCom", ["oneComNumber"]),
  },
};
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^