Vuex

2017-12-06  本文已影响0人  WarmladyYY

以下是个人对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下篇补上)

上一篇下一篇

猜你喜欢

热点阅读