Vuex
以下是个人对vuex的理解(个人见解,大腿勿喷)
GO!GO!GO!
Vuex.js是一状态管理模式,通俗讲就也就是数据管理模式,用来存放组件的状态(数据),并提供一些方法来'蹂躏'这些状态(数据) 下边举个官方小例子:
他的核心概念分为:
const store = new Vuex.Store({
state: {},
getter:{},
mutations: {},
Action:{}
})
1、Statestate--单一状态树,白话说就是全局唯一的数据源,一个项目中就这么一个store实例,这个状态存储是响应式的,store中发生变化,各组件中共享的数据也会发生变化(使用方法写到后面)
2、Gettergetter--计算属性 就是把你store的状态(数据)根据需要做出相应的处理,getter也可以返回一个函数实现getter传参。
3、Mutationmutation--管理状态树,需要更改store状态的的时候必须用mutation,mutation就跟们平时js中写的函数差不多mutation{test(){.....}}调用方法就是你的告诉他,我要出发这个"test" 即 store.commit('test')
4、Actionaction--异步操作的事件,与mutation相似,不同的是mutation为同步,action为异步,当你的操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成了。其他使用commit即可。
5、Modulemodule没什么好说的,就是管理以上那些对象,拆分store,命名为新得module每个module都有自己的state、mutation、action、getter等等等。。。
另外还有几个辅助函数:mapState、mapGetters、mapActions和plugins(辅助函数下一篇补上。)
过多的话就不BB了,下面开始安装Vuex
目录结构个人认为 应该把vuex新建到一个文件就像router一样一目了然方便管理
1、cd到项目目录 然后 npm install vuex --save (用cnpm更快一下)
2、之后再src目录下新建一个文件夹 'store' 名字随意自己看懂就成store下创建4个js文件(当然根据项目需要而定,这四个都是基本的)
index.js action.js mutation-type.js mutation.js
3.编写store下的index.js文件
import Vue from 'vue'import Vuex from 'vuex'
import mutations from './mutations
'import actions from './action'
Vue.use(Vuex)
const state = {
....
}
export default new Vuex.Store({
state,
actions,
mutations
})
4.这时候要去 main.js中注册一下import store from './store (等同通于import store from './store/index)
new Vue({
el: '#app', template: '',
components: { App },
router,
store //将store挂在到实例上
})
5.大功搞成下面开始动手写demo了(demo下篇补上)