vueX

vueX

1.vuex简介

1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采 用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
使用Vuex管理数据的好处：
1.能够在 vuex 中集中管理共享的数据，便于开发和后期进行维护。
2.能够高效的实现组件之间的数据共享，提高开发效率。
3.存储在 vuex 中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新。

2.安装

npm install  vuex

在main.js 中引入

import store from './store'
new Vue({

store

})

3.使用

在store里建一个index.js

引入vue 和vuex

import Vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)

3.1 state

state 是唯一的公共数据源，所有的共享数据都放在Store中的state里

和data差不多，可以定义

  state: {
    count: 2,
    name: '小hong',
    age: 18
  },

在组件获取state的值

$store.state.name

计算属性获取

computed:{
    name1(){
        return this.$store.state.name
    },
    age1(){
        return this.$store.state.age
    }
}

辅助函数获取

引入mapstate

import { mapState } from 'vuex'

缩写

   computed: mapState({
     name1: state => state.name,
      age1: state => state.age
   })

如果计算属性的名称和state里的相同可缩写为

computed: ...mapstate(['name',])

3.2 getters

筛选属性,不能改变 state 中的数据

在index.js中定义getters

 getters: {
    songCount: state => state.songlist.length, //获取长度
    nameList: state =>
      state.songlist.filter(item =>
        item.outher === '周杰伦')    //找到outher是周杰伦的
  }

在组件中引入mapgetters

...mapGetters(['songCount', 'nameList'])

3.3Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

在mutations定义方法

 addSong (state, song) {
      state.songlist.push(song)
    }

在组件中引入mapmutations

 methods: {
    ...mapMutations(['addSong']),
    add () {
      const song = { id: 4, title: '这是第四首', outher: '周杰伦' }
      this.addSong(song)
    }
  }