Vuex的安装、使用及注意事项
使用Vuex的步骤：
（1）安装：
1.使用npm安装：
|
1
|
npm install vuex --save |
2.使用script标签引入
|
1
2
3
|
<script src="/path/to/vue.js"></script><script src="/path/to/vuex.js"></script> |
如果使用第一种方式安装Vuex插件，在使用Vuex插件之前需要在main.js入口文件中
1‘ 使用import方式引入Vuex
|
1
|
import Vuex from ‘vuex’ |
2‘ 使用Vue的插件引入函数Vue.use()使用Vuex
|
1
|
Vue.use(Vuex); |
（2）安装之后可以通过Vuex实例对象的Store方法创建一个store对象：
var store = new Vuex.Store({
state:{
NewMsg:{
Msgs:[
{
title:'暂无消息',
content:'暂无消息！',
url:'#no_msg',
id:'no_msg'
}
]
},
},
mutations:{
modifyMsg (state,Obj){
if(state.NewMsg.Msgs[0].id === 'no_msg'){
state.NewMsg.Msgs.shift();
}
var obj = {
title:Obj.title,
content:Obj.content
};
obj.id = 'Msg_' + Obj.id;
obj.url = '#' + obj.id;
state.NewMsg.Msgs.push(obj);
}
},
actions:{
fetchMsg (context){
$.ajax({
url:'PHP/GetMsgs.php',
type:'GET',
data:{},
dataType:'json',
success:function(response){
if ( typeof response === 'string') {
response = JSON.parse(response);
}
console.log(response);
$(response).each(function(k,v){
// console.log(v.id+v.title+v.content);
context.commit('modifyMsg',v);
});
}
});
}
}
});
（3）在Vue实例中注册store对象：
new Vue({
el: '#app',
router,
store,
created (){
store.dispatch('fetchMsg');
},
template: '<App/>',
components: { App }
})
（4）在组件中使用state数据：
必须通过computed属性使用state数据！否则state属性中的数据发生更改时不会反映在组件上！
export default {
computed: {
Msgs (){
var Msgs = this.$store.state.NewMsg.Msgs;
return Msgs;
}
}
}
注意事项：
基本组成：
注意vuex中几个核心概念：
state、mutations、actions、 getters、module
state：用于存储数据，类似vue实例的data属性。
mutations：用于递交更改，对state对象中的属性数据进行更改。
actions：用于进行递交异步更改，通过调用mutations实现对数据的更改。
getters：可以认为是store的计算属性;与计算属性一样,getter的返回值会根据它的依赖缓存起来,且只有当它的依赖值发生变化才会被重新计算
mapGetters：辅助函数，将 store 中的 getter 映射到局部计算属性：
module：将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
actions与mutations的区别：
其中actions区别于mutations的地方在于mutations只能进行同步更改，而actions中的更改可以是异步执行。所以基本上所有用户执行的直接数据更改都是触发mutations属性
函数执行，而需要与后端进行数据交互的数据更改通常是通过actions属性函数去执行。
定义actions与mutations属性函数的注意事项：
其中定义mutations属性函数时必须传递的第一个参数是state，因为要对state进行更改，第二个参数代表传入的新参数。mutations属性函数只接受两个参数，如果要同时更
改多个属性值，可以通过对象传入。
在actions属性函数中可以通过context.commit()方法触发mutations属性函数。定义actions属性函数时，必须传递的第一个参数是context，用于触发mutations函数。
触发actions与mutations属性函数的方法：
在子组件中通过this.$store.commit()方法触发mutations属性函数。在注册store的Vue实例中（第三步中将会讲到）可以通过store.commit()触发。
commit函数第一个参数是mutations的属性函数名，第二个参数是传入的新值。
actions属性函数中可以进行异步操作，比如通过ajax或者Vue.Resource()进行数据获取，获取数据后再通过context.commit()触发更改。
触发actions属性函数使用this.$store.dispatch()或者store.dispatch() （在注册store的Vue实例中）函数。dispatch函数传递的一个参数是actions属性函数名称。如果希望在
Vue实例创建完成还未挂载时就从后端获取数据，则可以在created钩子函数中调用actions属性函数。
在组件中访问数据中心state的注意事项：
在Vue实例中可以通过this.$store.state对象获取state中的数据。如果希望在state中的数据发生更改之后，组件会自动更新，则应该使用组件的computed属性定义数据，而
不是通过data属性定义。如果使用data定义组件数据，则state中的数据发生更改之后组件不会发生变化。
export default {
computed: {
Msgs (){
var Msgs = this.$store.state.NewMsg.Msgs;
return Msgs;
}
}
}
mapGetters使用：辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
module使用注意事项：
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象;当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
|
如果你希望使用全局 state 和 getter，rootState 和 rootGetter 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action
