Vuex相关知识点

vuex官方网站

一.Vuex定义

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

二.Vuex安装

npm i vuex@3.4.0

注意：由于vuex有较大的更新，可能会出现问题，建议 Vue2创建项目的时候 勾选上此时 vuex版本是 “vuex”: “^3.4.0” ,但在Vue3 中使用的vuex版本是 “vuex”: “^4.0.0” 。

三.Vuex定义和配置

1.在src 目录下 创建store/index.js 用来存放vuex的相关配置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        singerList: [
            { id: 1, name: '薛之谦' },
            { id: 2, name: '周杰伦' },
            { id: 3, name: '陈奕迅' },
            { id: 4, name: '孙燕姿' },
        ],
    },
    mutations: {
        ADDFN(state,value){
            state.singerList.push(value)
        }
    },
    actions: {
        //功能：添加一条数据 并判断是否存在 存在不添加 不存在添加
        addAction(context,value){
            const index = context.state.singerList.findIndex((item)=>{
                return item.name === value.name
            })
            if(index > -1) return
            context.commit('ADDFN',value)
        }
    },
    // 类似于 computed 需要 return
    getters:{
        // 功能：取数据中第一项数据
        singerListFirstName(state){
            return state.singerList[0].name
        }
    },
})

2.需要在main.js 中配置store

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

四.Vuex中的使用

1.走通第一条路 ：如何在其他组件中 使用store/idnex.js 中定义的state数据
components/Singer.vue

<template>
  <div class="singer">
    <h3>歌手列表</h3>
    <ul>
      <li v-for="item in singerList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Singer",
  data() {
    return {};
  },
  methods: {},
  computed: {
    ...mapState(["singerList"]),
  },
};
</script>

注意：调用state里面的数据，要在组件的computed 计算属性里面调用
2.走通第二条路：在其他组件中使用mutations方法
InputAdd.vue

<template>
  <div class="inputadd">
    <h3>添加一名歌手</h3>
    <select v-model="selectstr">
      <option value="李荣浩">李荣浩</option>
      <option value="邓紫棋">邓紫棋</option>
      <option value="隔壁老樊">隔壁老樊</option>
    </select>
    <button @click="addFn">添加一条</button>
  </div>
</template>
<script>
//第一步 先引入
import { mapMutations } from "vuex";
export default {
  name: "InputAdd",
  data() {
    return {
      selectstr: "李荣浩",
    };
  },
  methods: {
    //使用mapMutations 进行解构  里面填写 mutations 里面函数名称
    ...mapMutations(["ADDFN"]),
    addFn() {
      //使用函数 
      this.ADDFN({ id: 5, name: this.selectstr });
    },
  },
};
</script>

注意：激活mutations里面的函数 需要在methods里面
3.走通第三条路：如何激活actions里面的函数

在actions里面定义函数作用：
点击添加判断 首先判断是否存在 不存在添加 存在不添加
InputAdd.vue 判断是否添加重复，一个歌手只能出现一次

<template>
  <div class="inputadd">
    <h3>添加一名歌手</h3>
    <select v-model="selectstr">
      <option value="李荣浩">李荣浩</option>
      <option value="邓紫棋">邓紫棋</option>
      <option value="隔壁老樊">隔壁老樊</option>
    </select>
    <button @click="addFn">添加一条</button>
  </div>
</template>
<script>
import {  mapActions } from "vuex";
export default {
  name: "InputAdd",
  data() {
    return {
      selectstr: "李荣浩",
    };
  },
  methods: {
    ...mapActions(["addAction"]),
    addFn() {
      this.addAction({ id: 8, name: this.selectstr });
    },
  },
};
</script>

4.走通第四条路：如何使用getters的值
ShowName.vue

<template>
  <div class="singer">
    <h3>{{singerListFirstName}}</h3>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "ShowName",
  computed: {
      ...mapGetters(['singerListFirstName'])
  },
};
</script>