Vuex的使用(state和getter)-一一网

这是我参与更文挑战的第4天，活动详情查看：更文挑战

在使用vuex之前我们要先弄清楚 vuex是啥呢？？

在这里，我就直接引用官网的说明Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 其实我的理解就是说，他是一种数据的储存方式，里面的数据会不断随着用户的操作而变化。
既然要使用那铁定是要安装的，vue官方并没有内置此插件。

安装vuex

npm install vuex
复制代码

安装起来比较简单，那我们直接开始配置它吧！

vuex的配置

首先新建一个.js文件，这里我直接叫 store.js

import Vue from 'vue'
import Vuex from 'vuex'
//要使用 那肯定是要引入的
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
复制代码

这时需要在main.js中对他进进行配置

import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
  router,
  store,  //注册 vuex实例
  render: h => h(App)
}).$mount('#app')
复制代码

vuex核心概念

state

state 个人理解就是一个储存数据的地方

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

Vue.use(Vuex);

export default new Vuex.Store({
//其中 state中的数据 可以是个对象  也可以是个数组或者是一个字符串
  state: {
    value: "state 是进行 数据渲染的",
    uid: [
      {id: '张三'},
      {id: '李四'},
      {id: '王五'},
      {id: '赵六'},
    ]
    name: {id: "赵四"}
  }
});
复制代码

这时候我们就在vuex中分别储存了三种类型的数据但要怎么展示呢？

<template>
  <div>
    {{ value }} <!-- "state 是进行 数据渲染的", -->
    {{ uid }} <!-- [{id: '张三'},{id: '李四'},{id: '王五'},{id: '赵六'},] -->
    {{ name }} <!-- {id: "赵四"} -->
  </div>
</template>

<script>
import b from "./b.vue";
export default {
  name: a,
  computed: {
  
    //由于 我们 之前 直接在根实例中 注册了store， 那么我们 就可以 直接 通过  this.$store.state  获取数据了
    value() {
      return this.$store.state.value;
    },
    uid() {
      return this.$store.state.uid;
    },
    name() {
      return this.$store.state.name;
    },
  },
};
</script>
复制代码

mapState 辅助函数

辅助函数就是帮我们快速的一键快速导入数据要使用辅助函数记得先引入哦

import { mapState } from 'vuex'

computed:{
        ...mapState([value, uid, name]) // 在组件通过this就可调用，不用再写this.$store.state
}
复制代码

是不是要简单一点呢嘿嘿

Getter

getter用于对state里面的数据进行处理并形成新的数据也就是说 getter不会更改state里面的数据相当于vue里面的computed属性并且会跟着 state的改变而改变

getter的使用

export default new Vuex.Store({
  state: {
    num: 0
    },
  getters: {
      //addNum( 接收一个参数 state ){}
      addNum (state){
           return state.num
      }
  }
});
复制代码

<template>
  <!-- html模板 -->
  <div>
    {{$store.getters.addNum}}  //0
  </div>
</template>
复制代码

mapGetters 辅助函数**

<template>
  <!-- html模板 -->
  <div>
    {{addNum}}  //0
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: a,
  computed: {
      ...mapGetters(['addNum '])
  },
};
</script>
复制代码