简单易懂的vuex用法

Vuex是什么？

http://vuex.vuejs.org/zh-cn/intro.html 
如果无法理解，你可以理解为一种开发模式或框架。比如PHP有thinkphp，Java有spring等。 
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）

vuex是以插件的方式存在的。

安装;

npm install vuex --save-dev

• 1

• 1

vuex里面有什么？

应用级的状态集中放在store中； 
改变状态的方式是提交mutations，这是个同步的事物； 
异步逻辑应该封装在action中

演练

1、新建一个store文件夹,新建一个index.js存放

import Vuex from 'vuex';
Vue.use(Vuex);

import abc from './modules/abc'

/*使用Vuex*/
Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        abc
    },
    strict: true
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

2、在新建一个modules文件夹,里面新建一个abc.js,内容如下

const state = {			//定义数据
		abc:'',    
		abd:''
}
const mutations = {		
	abcs:function(store,item){  	//提交数据的方法，第一个参数是调用mutations里面方法名,第二个参数是要保存的值
		store.abc = item;	//store.abc就是获取到我们之前定义数据里面的abc,然后赋值给它
	},
	abd:function(store,data){
		store.abd = data;
	}
}//异步
const actions={


}
const getters={						
	Setabc: state => state.abc,    //Setabc是获取刚才abc数据的方法
	Setabd: state => state.abd
}
/*将store导出*/
export default {
  state,
  mutations,
  getters,
  actions
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

3、接下来在main.js引入store

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store/index'    //这个是引入的路径


Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,			   //实例化store
  template: '',
  components: { App }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

4、大功告成，可以用了，在页面上使用了，谢谢大家