Vue——14-vuex安装 State、Mutations以及Getters状态的的使用

目录

Vuex是什么？

一、可以直接使用vue-ui 进行下载插件vuex

二、使用npm安装vuex

三、yarn安装

vuex的五大核心

mapState辅助函数

mapMutations 辅助函数

载荷

mapGetters辅助函数

---

Vuex是什么？

介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。

看个官网图片：

state：存储数据和状态。

mutatins：通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。切记：Vuex中store数据改变的唯一方法就是mutation！

action：在mutation中我们讲到，mutation中是存放处理数据的方法的集合，我们使用的时候需要commit。但是commit是同步函数，而且只能是同步执行。那我们想异步操作怎么办？
作用：在actions中提交mutation，并且可以包含任何的异步操作。actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）

 下面说一下具体安装方法

但首先你得有一个脚手架，具体安装方法请参考Vue——安装@vue/cli(Vue脚手架)的三种方式

一、可以直接使用vue-ui 进行下载插件vuex

 

 

安装完毕后会发现文件中多了一个store文件夹，里面有个index.js文件 

 

store/index.js中应该有以下代码：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  mutations:{
  },
  getter：{
  }，
  actions: {
  },
  modules: {
  }
})

 接下来在main.js中引入配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store';
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 引入后就可以使用vuex了

---

二、使用npm安装vuex

npm install vuex --save

三、yarn安装

yarn add vuex

安装完毕后不会自动生成store文件夹以及里面的文件，这时要自己去新建并且书写里面的配置项

可以package.json中查看是否安装成功vuex

---

下面来看一下vuex的五个核心：

vuex的五大核心

也就是store文件夹下的index.js中的五个状态

state、mutaions、getter、actions、modules

1.、state：vuex的基本数据，用来存储变量

在vue中使用 

$store.state.(state中数据的名称)  

state方法是写在计算属性(computed)里的

2、mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

在vue中使用

$store.commit('')

mutation方法是写在methods里的

3、 geeter：从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法

我们可以认为，【getters】是store的计算属性。getters方法是写在计算属性(computed)里的

4. action：和mutation的功能大致相同，不同之处在于  Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
简单来说就是可以把以上的 state、mutation、action、getters 整合成一个user.js,然后放到store.js里面。

---

使用state显示数据的四种方法

index.部分

  state: {
    count:5
  },

app.vue部分 如下：

第一种：

<h1>{{ $store.state.count }}</h1>

第二种：

 <h2>{{ vcount }}</h2>

 computed: {
			vcount() {
				return this.$store.state.count
			}
		} 

第三种： 

<h3>{{ count }}</h3>

mapState辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。

接下来引入辅助函数：

import { mapState} from "vuex";

computed:{
    ...mapState(["count"]),
}

第四种：

<h4>{{ count }}</h4>

computed：{
    ...mapState({
      count: (state) => state.count,
    }),
}

效果如下：

 使用mutation状态写出加减计数器

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count:5
  },
  mutations: {
    add(state){
      state.count++
    },
    sub(state){
      state.count--
    }
  },
})

app.vue部分 如下：

第一种：

    <h1>{{ $store.state.count }}</h1>
    <button @click="vadd">+</button>
    <button @click="vsub">-</button>

methods：{
    vadd() {
      this.$store.commit("add");
    },
    vsub() {
      this.$store.commit("sub");
    },
}

第二种：

    <h2>{{ vcount }}</h2>
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('sub')">-</button>

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

第三种：

    <h3>{{ count }}</h3>
    <button @click="add">+</button>
    <button @click="sub">-</button>

mapMutations 辅助函数

与其他辅助函数类似，你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）

引入辅助函数： mapMutations 

import { mapState ,mapMutations } from "vuex";

methods：{
    ...mapMutations(['add', 'sub'])
}

第四种：

    <h4>{{ count }}</h4>
    <button @click="sadd">+</button>
    <button @click="ssub">-</button>

methods：{
    ...mapMutations({
      sadd: "add",
      ssub: "sub",
    }),
}

第五种01  点击增加5或者10甚至其他值  通过传参

    //index.js部分
		inc(state,n){
			console.log(n);
			state.count += n
		},

app.vue部分 

<button @click="inc(5)">+5</button>
<button @click="inc(10)">+10</button>

methods:{
    ...mapMutations(['inc'])
}

也可以这样写：

<button @click="Inc2(5)">+5</button>
<button @click="Inc2(10)">+10</button>

methods:{
    ...mapMutations({
      Inc2: "inc",
    }),
}

第六种 通过preload载荷形式

mutations的载荷

把值传递给Mutations  给store.commit传一个附加参数，就叫做mutation的载荷

index.js部分：

    // index.js 部分
    // 第二个参数是载荷的方式，比如一个对象，一个数组,字符串等都可
		incrementcount(state,preload){
			console.log(preload);
			state.count += preload.count
		}

app.vue部分 

<h2>{{count}}</h2>
<button @click="counter(5)">+5</button>
<button @click="counter(10)">+10</button>

 counter(count) {
				this.$store.commit({
					type: 'incrementcount',
					count
				})
			} 

显示效果如下：

 对数组中的对象进行添加的两种写法： 

// index.js部分
export default new Vuex.Store({
  state: {
    record:[
			{id:100,name:'Nanchen',age:23},
			{id:101,name:'JiuAn',age:30},
			{id:102,name:'NanXi',age:50},
			{id:103,name:'QiuYun',age:28},
		]
  },
mutations：{
    add(state,preload){
			state.record.push(preload)
		}
}

app.vue部分  

    <p>{{ record }}</p>
    <button @click="add(home)">添加一组</button>

  data() {
    return {
      home:{
        id:250,
        name:'Nanchen66',
        age:80
      },
    };
}
 methods: {
    ...mapMutations(['add']) ,
  },
  computed: {
    ...mapState(['record']),
  },

第二种写法：

app.vue部分  

        //index.js
  mutations: {
    addrecord(state,preload){
			state.record.push(preload)
		}
  },

<h3>{{record}}</h3>
<button @click="sadd()">添加+</button>

  methods: {
    sadd() {
				const home = {
					id: 114,
					name: 'xuqi',
					age: 35
				}
				this.$store.commit('addrecord',home)
			}
  },
  computed: {
    ...mapState(['record']),
  },

效果如下：

 

getters

index.js

重新弄一份对象中的数组

            list: [{
				id: 1,
				name: "商品一",
				status: false
			},
			{
				id: 2,
				name: "商品二",
				status: true
			},
			{
				id: 3,
				name: "商品三",
				status: false
			},
			{
				id: 4,
				name: "商品四",
				status: true
			},
			{
				id: 5,
				name: "商品五",
				status: false
			}
		]

getters:{

    activeList(state){
      return state.record.filter(v=>{
        return v.status
      })
    },
  },

这里要筛选出带有status值为true的对象 

app.vue部分  

第一种写法：

  <h1>{{$store.getters.activeList}}</h1>

第二种写法：

<h2>{{list}}</h2>

computed:{
    list(){
      return this.$store.getters.activeList
    },
}

第三种写法：

使用辅助函数mapGetters

mapGetters辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

app.vue部分  

import {mapGetters } from "vuex";

  <!-- 第三种方法使用辅助函数 -->
  <h3>{{activeList}}</h3>

computed:{
    ...mapGetters(['activeList']),
}

第四种写法：

  <!-- 第四种方法 -->
  <h4>{{list}}</h4>

computed:{
   ...mapGetters({
      list:'activeList'
    })
}

效果如下所示：（记得把之前的给注释掉以免被干扰）

 下面是筛选ID大于3的数据（因为上面的代码影响所以也只会执行status为true并且ID大于3的数据）

index.js部分 

getters:{
    getList:(state,getters)=>{
      return getters.activeList.filter(v=>{
        return v.id >3
      })
    }
}

app.vue部分  

 <h4>{{getList}}</h4>

直接在第四种方法后写入：

getList:'getList'

运行结果如下：

筛选只需要ID为3的数据

index.js部分  

getters:{
    getById:function(state){
      return function(id){
        return state.list.filter(function(v){
          return v.id === id
        })
      }
    }
}

app.vue部分  

<h4>{{getById(3)}}</h4>

 再在第四种方法后写入：

 getById:'getById'

效果如下：