vuex的基础用法

（重要）介绍一个vue项目给大家学习，阅读别人的项目可以快速提高自己哦， 移动端vue完整项目

这里以vue-cli项目为例：

1，安装vuex cnpm isntall vuex --save或者vuex npm isntall vuex --save

2，配置：

（1）在src文件夹下创建文件夹store，在store再创建三个js文件，分别为：action.js,mutations.js,index.js

action.js 这里可以进行网络请求

[javascript]  view plain  copy

1. // change state  
2. export default{  
3.     // json data yes default parameter,my_parameter by me parameter  
4.     addNum({ commit, state },my_parameter) {  
5.         commit('ADD',my_parameter)  
6.     }  
7. }  

mutations.js 这里不许进行网络请求

[javascript]  view plain  copy

1. const ADD = 'ADD'  
2. export default{  
3.     // first parameter yes default parameter  
4. [ADD](state,my_parameter) {  
5.         state.testdata = my_parameter  
6.     }     
7. }  

index.js 

[javascript]  view plain  copy

1. import Vue from 'vue'  
2. import Vuex from 'vuex'  
3. import mutations from './mutations'  
4. import actions from './action'  
5. Vue.use(Vuex)  
6.   
7. const state = {  
8.     testdata:'data1'  
9. }  
10. const store = new Vuex.Store({  
11.     state,  
12.     actions,  
13.     mutations  
14. })  
15. export default store  

main.js配置如下：

import store from './store/'

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})
3，使用方法：待续

[plain]  view plain  copy

1. <template>  
2.     <div class="box">  
3.         {{getdata}}  
4.         <button type="button" @click='commit'>commit change data</button>  
5.         <button type="button" @click='dispatch'>dispatch change data</button>  
6.     </div>  
7. </template>  
8. <style scoped></style>  
9. <script type="text/javascript">  
10.     export default{  
11.         computed: {  
12.     getdata () {  
13.         // get store data   
14.       return this.$store.state.testdata  
15.     }  
16.   },  
17.   methods:{  
18.     commit:function (){  
19.         // change store data 这是比较直接（但也属于间接更改）的更改,注意这个方法不会调用action里的方法  
20.         this.$store.commit('ADD','commit string')  
21.     },  
22.     dispatch:function(){  
23.         // 这个方法则会执行action.js文件里面的方法，不过在vuex2.0版本里推荐使用commit方法来进行操作  
24.         this.$store.dispatch('ADD','dispatch string')  
25.     }  
26.   }  
27.     }  
28. </script>