尝试使用Vue.js(四)引入vuex

尝试使用Vue.js(四)引入vuex

用‘vue’尝试写了个小Demo,熟悉一下vue的流程,和vue生态圈里的‘vue-router’、‘vuex’等。
Demo的在线预览地址
Demo的github代码地址
这篇文章介绍下载‘vue-cli’脚手架基础上 引入vuex


分下面一点介绍:
. vuex使用


vue中数据的传递有两种:

第一种通过 props 和 $emit(event,{}):

  • 父—>子传数据,通过porps,通过属性值给子组件传数据

  • 子—>父 通过 $emit(event,{data:xxx})触发事件,通过 $on(eventName)监听事件

这种方式,在数据不复杂的情况下,可以使用,如果用这种方法实现非父子组件通信,就变成 子组件–>父组件—>另一个子组件,两个子组件通信,要以父组件为桥梁,如果遇到更复杂的,就有点难以维护了。

第二种通过Vuex来解决:

  • 我自己简单的理解,vuex维护的数据,就是一个全局的一个单例,所有的组件,都引用这一个单例里的数据,所有的操作都操作同一份数据,也就做到了同一份数据改变,同步到所有的组件中。

vuex的引入:(vue-cli生成的工程基础上)

首先:npm install vuex –save
注:如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安vuex功能,如这样:

1
2
3
4
import Vue from 'vue'
import Vuex from "vuex";
Vue.use(Vuex)

2.看下demo中如何用的:

首先:新建一个 ‘src/store/index.js’这个文件的内容如下:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex
Vue.use(Vuex); //增加vuex功能
export default new Vuex.Store({ //此文件直接export
//出去一个实例化好的 Vuex.Store
state: {
messages: [
{
key: tool.getTimestamp(), //列表key
type: USER_TYPE.ROBOT, //类型
value: '你好,您有什么需要,可以直接和我对话😁', //内容
userId: '' //信息发送者
}
],
userId: xxxxx,
loading: flase
},
getters: {
getMessages: state => {
return state.messages || [];
},
getUserId: state => {
return state.userId;
}
},
mutations: {
pushMassages: (state, message) => {
state.messages.push(message);
},
clearMassages: state => {
state.massages = [];
},
setLoading: (state, loading) => {
state.loading = loading;
}
},
actions: {
pushMassages: ({
commit
}, message) => {
return new Promise(function(resolve, reject) {
commit("pushMassages", message);
resolve();
});
},
clearMassages: ({
commit
}) => {
return new Promise(function(resolve, reject) {
commit("clearMassages");
resolve();
});
},
}
});

一个vuex的store,主要四个属性:

  1. state:就是数据,所有的组件所需要的数据,都在state里
  2. getters:组件获取state里的数据可以通过store.state.xx, 但是这样如果还需要一些额外的处理,还得单独处理,所以在getters里统一处理一下东西,用的时候直接从 getters里拿数据
  3. mutations:mutations里是对 state的一些操作,vuex所有对state的操作都必须通过 ‘mutations’,mutations的操作都是同步的!
  4. actions: actions也是操作state的数据而诞生的,你会疑问:‘不是已经有mutations了吗?’,刚才说了mutations只能同步操作state,actions就是为异步操作state诞生的,可以把一些异步接口之后操作state的行为放到 actions里做。actions里的方法可以返回一个promise对象。

‘src/store/index.js’写好以后,就是在’src/main.js’ 应用vuex:

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
import App from './App'
import store from "./store"; //引入store的配置
/* eslint-disable no-new */
new Vue({
store, //应用配置
render: h => h(App)
}).$mount("#app");

上面两步写好,在组件中怎么用呢?可以参考’src/components/messageList.vue’:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//我只写下js部分的代码
export default {
name: 'messageList',
data (){
return {
message: ''
}
},
computed: {
messageList() { //通过getters 获取store的数据
return this.$store.getters.getMessages;
},
userId() { //通过getters 获取store的数据
return this.$store.getters.getUserId;
}
},
methods:{
contract() {},
//发送消息
sendMessage () {
if (this.message == '') {
return;
}
this.$store.dispatch('pushMassages',
{
key: tool.getTimestamp(),
type: USER_TYPE.PEOLE,
value: this.message,
userId: ''
}).then(data =>{this.$store.dispatch('pushMassages',{
// 通过“dispatch”调用actions的方法
key: tool.getTimestamp(),
type: USER_TYPE.ROBOT,
value: data,
userId: ''
}).then(data
//actions返回一个promise,进行下一步操作
=>{this.clearInput()});
})
});
},
clearInput() {
this.message = '';
}
}
}

具体实现可以看下 Demo的github代码地址 中的‘src/store/index’ 和 ‘src/main’ 两个文件

注:vuex的细节理解和技巧总结,下一篇单独写一下吧。不放这个里写了

作者 [@sha Qihe]

2016 年 12月 24日