vuex入门内容的一些整理

关于Vuex的一些内容

1. state组件中的状态和数据都会被保存在一个统一的内存空间中管理，这个空间将其称为state；
2. state中的数据可以方便地映射到组件中去渲染一个Vue Components；
3. 当组件中的数据发生变化时，通过dispatch一个action（通常是一些异步操作或者是与后端的交互），然后commit一个mutation；或者也可以由组件直接去commit一个mutation。mutation是唯一一个可以修改state的途径；

常用场景

1. 多个组件间的状态共享，例如一些兄弟组件或者关联度低的组件；
2. 路由间的复杂数据传递，例如传递的参数较为复杂

例子

目录结构

vuex的初始化

state.js中存放数据状态，如下存放了一个singer的对象

const state = {
  singer: {}
}

export default state

mutations.js中存放的是更新数据的方法

mutation-types.js中存放的是方法的名字

//mutation-types.js文件
export const SET_SINGER = 'SET_SINGER'

//mutations文件
import * as types from './mutation-types'

const mutations = {
  [types.SET_SINGER](state, singer) {
    state.singer = singer
  }
}

export default mutations

getters.js

export const singer = state => state.singer

index是入口文件

import Vue from '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' //打印日志

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== "production" //线下环境进行debug

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

在总main.js中使用和注册store

……
import store from './store'//添加的部分
……
new Vue({
  el: '#app2',
  render: h => h(App),
  ……
  store, //添加的部分
  ……
  router
})

在组件中使用vuex

 methods: {
    selectSinger(singer) {
      ........
      this.setSinger(singer);//此处即使调用SET_SINGER,更新store中的singer
    },
...mapMutations({
      setSinger: "SET_SINGER"
    })
}

//获取到store中的singer
 computed: {
    ...mapGetters(["singer"])
  },