关于Vuex的一些内容
- state组件中的状态和数据都会被保存在一个统一的内存空间中管理，这个空间将其称为state；
- state中的数据可以方便地映射到组件中去渲染一个Vue Components；
- 当组件中的数据发生变化时，通过dispatch一个action（通常是一些异步操作或者是与后端的交互），然后commit一个mutation；或者也可以由组件直接去commit一个mutation。mutation是唯一一个可以修改state的途径；
常用场景
- 多个组件间的状态共享，例如一些兄弟组件或者关联度低的组件；
- 路由间的复杂数据传递，例如传递的参数较为复杂
例子
目录结构
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"])
},
