vuex的搭建与初始化 - 追梦猪提供高效的web前端解决方案

概述

vuex是什么，意义在哪里

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

通俗讲，就是在vue的开发中解决两个问题

1.多个视图依赖于同一状态

传参的方法对于多层嵌套的组件将会非常繁琐，并且对>于兄弟组件间的状态传递无能为力。

2.来自不同视图的行为需要变更同一状态

我们经常会采用父子组件直接饮用或者通过事件来变声和同步状态的多份拷贝。

我们把不同组件的共享状态抽取出来，以一个全局单例模式管理，在这个这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为

即把组件的共享状态抽取出来，以一个全局单例模式管理，在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

Vuex的初始化

vuex的应用核心就是store仓库，是一个容器，包含着你应用中大部分的状态

1.在main.js中添加store文件

import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

2、在src中创建strore文件，其中包括以下基本的文件

actions.js
getters.js
mutations.js
mutation-types.js
state.js
index.js

store(index.js文件)

这个文件负责把文件引入组织

vuex中的状态是响应式的，一旦改变某个状态，相关联的组件都会得到更新

不能之间改变状态，需要通过提交（commit）来改变

import Vue from 'vue'/需要依赖于vue/
import Vuex from 'vuex'
import  as actions from './actions'
import  as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
/将vuex第三方插件注入到vue实例上/
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
/创建一个Store对象/
export default new Vuex.Store({
    actions,
    getters,/对应mapGetters/
    mutations,/对应mapMutations/
    state,
    strict: debug,
    plugins: debug?[createLogger()]:[]
})

state

/定义state对象
 state文件负责定义所有用到的数据，但需要是最基本的数据
/
const state = {
    singer:{},
    count: 1
}
export default state

getters(获取返回状态数据)

/编写getters的变量映射
 getters文件是对象数据的映射，是一些函数，通关getters来获取state数据不能直接访问，使用箭头函数更加简洁
对应const singer变量
  …mapGetters([
       'singer'
   ])
/
export const singer = state => state.singer

Mutation

Mutation-types文件定义了setter里面的一些函数“接口”，更加工程模式化
export const SET_SINGER = ‘SET_SINGER’
1
Mutation文件是store中状态的唯一方法提交matation，回调函数中的一个参数必须是state作为第一个参数，第二个参数可以使设置状态的状态值

import  as types from './mutation-types'
const matutaions = {
    /为state的属性赋值
      对应
      …mapMutations({
        setSinger: 'SET_SINGER'
      })
      this.setSinger(数据)
     /
    types.SET_SINGER{
        state.singer = singer
    }
}
export default matutaions

Action

action文件对一些set的集中封装一个事件可以集中改变一些状态

import * as types from './mutation-types'
// 定义一个函数批量修改state下的值
export const selectPlay = function ({commit, state}, {list, index}) {
    commit(types.SET_SINGER, list)
}

访问

在组件中设置state状态

vuex提供mapMutations的语法糖；在methods中定义，并且重命名，在mathod中可以直接当成函数来使用

import {mapMutations} from 'vuex'
methods:{
    selectSinger(singer){
        this.$router.push({
            path: /singer/${singer.id}
        })
        this.setSinger(singer)
        //相当于
        //this.$store.commit('SET_SINGER',singer)
    },
    …mapMutations({
        setSinger: 'SET_SINGER'
    })
}

在组件中访问state状态

vuex提供mapGetters的语法糖；引入之后可以在computed中定义，动态监测数据变化，在页面中可以直接访问

import {mapGetters} from 'vuex'
computed:{
    …mapGetters([
        'singer'
    ])
}

在组件中使用actions
vuex提供mapActions的语法糖；在methods中定义，在methods当成一个函数来使用

import {mapActions} from 'vuex'
methods: {
    selectItem (item, index) {
      this.selectPlay({
        list: this.songs,
        index
      })
    },
    …mapActions([
    ])
}

概述