vuex使用-简单实例

接触vue有半年时间了，vuex在我们的vue项目中频繁被使用，但一直停留在跟着别人写的代码代码依葫芦画瓢的状态，对vuex最熟悉的就是state和mutations两个属性，对getter和actions两个属性有大致印象，但几乎没有用过。这几天趁着空闲时间又看了一遍vuex的文档，算是对vuex有一点更深的认识。但光是看一遍文档其实并没有什么用，在实际开发中必须知道真实的项目中该怎么使用它。所以看完后也是抓紧功夫写了一个简单demo，目前还非常简单，有时间会继续补充。

放上vuex中文文档链接 https://vuex.vuejs.org/zh/guide/

项目地址：https://github.com/blueprint1453/vuex_demo

用脚手架直接生成的项目，components下新建demo.vue文件，创建一个store文件夹，下面新建一个store.js文件

store.js中代码如下：

import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
   state:{
       count:0,
       userInfo:{},
       students:[]
   },
   getters:{
     
   },
   mutations:{
       updateCount(state,count){
           state.count = count
       },
       getUserInfo(state,userInfo){
           state.userInfo = userInfo
       },
       getStudents(state,students){
           state.students = students
       }
   },
   actions:{
       updateCountAsync({commit,state},count){
           setTimeout(function() {
               console.log('count:'+count)
               commit('updateCount',count)
           }, 1000);
       },
       getUserInfo({commit,state},_this){
           let _vm = _this
           console.log(_vm)
           _vm.$http.get('http://localhost:8080/static/data/user.json').then(res=>{
               console.log(res)
               commit('getUserInfo',res.data)
           })
       },
       getStudents({commit,state},_this){
           let _vm = _this
           _vm.$http.get('/api/students').then(res=>{
               console.log(res)
               commit('getStudents',res.data.data.students)
           })
       }
   }
})
复制代码

demo.vue中代码如下：

 <div class="hello">
   <h1>{{ msg }}</h1>
     
   <div class="number-box" style="margin:20px 0;">
     <button @click="plus">加 一</button>
     <input type="text" v-model="number" style="padding-left:20px;">
     <button @click="minus">减 一</button>
   </div>

   <button @click="getUserInfo">获取用户信息</button>
   <div class="user-info" v-if="userInfo">
     <span class="name" >{{userInfo.name}}</span>
     <span class="gender" >{{userInfo.gender}}</span>
     <span class="age">{{userInfo.age}}</span>
   </div>
   
   <button @click="getStudentList">获取成绩榜单</button>
   <div v-if="students.length>0">
     <h4 >成绩榜单</h4>
     <ul>
       <li v-for="item in students" :key="item.id">
         <span>{{item.name}}</span>
         <span>{{item.score}}</span>
       </li>
     </ul>
   </div>
 </div>
</template>

<style>

</style>

<script>
export default {
 name: 'HelloWorld',
 data () {
   return {
     msg: 'Welcome to Your Vue.js App'
   }
 },
 mounted() {
   
 },
 computed:{
   number(){
     return this.$store.state.count
   },
   userInfo(){
     return this.$store.state.userInfo
   },
   students(){
     return this.$store.state.students
   }
 },
 methods:{
   plus(){
     // this.number++
     let count = Number(this.number)+1
     console.log('plus:'+count)
   //   this.$store.commit('updateCount',count)
     this.$store.dispatch('updateCountAsync',count)
   },
   minus(){
     // this.number--
     let count = Number(this.number)-1
     console.log('minus:'+count)
   //   this.$store.commit('updateCount',count)
     this.$store.dispatch('updateCountAsync',count)
   },
   getUserInfo(){
     this.$store.dispatch('getUserInfo',this)
   },
   getStudentList(){
     this.$store.dispatch('getStudents',this)
   }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
.user-info{
 margin-top:20px;
 margin-bottom:20px;
}
.name{
 color:blue;margin-right:20px
}
.gender{
 color:red;margin-right:20px
}
.age{
 color:blue;margin-right:20px
}
</style>
复制代码

在state中定义了count、userInfo、students三个属性,state里面的数据状态可以在全局中被访问，在任意组件中通过this.$store.state.attrName访问，在demo.vue的computed属性里面，我们获取了以上三个属性

getter中可以自定义一些函数对state属性里面的数据进行过滤，并且在任意组件中可以通过this.$store.gettter.functionName的方式获取

mutaions用来更新state里面的状态，我们可以定义一些方法对数据进行操作，在里面的方法中至少有state和value两个参数，state就是上面所说的state对象（属性），value就是从组件传递来的值。可以看到，在demo.vue中点击加号按钮或者减号按钮，通过this.$store.commit('getUserInfo',count)的方式向vuex提交了一个事件，在store.js中mutaions里面的updateCount将提交过值接收并进行处理，state里面的count状态被更新，这是demo组件的computed属性中的number被执行，然后紧接着dom被更新。

actions也是对state状态进行更新，但是是间接的，一些异步的操作先交给actions里面的函数执行，拿到结果后在交给mutaions中相应的处理函数处理，接下来的操作就跟上面讲的一样。 点击获取用户信息按钮，通过this.$store.dispatch('getUserInfo',this)向vuex提交了一个事件，store.js中actions的getUserInfo函数处理了这个事件，向本地一个user.json文件发了一个异步请求，难道结果后将返回的用户信息交给了mutaions的getUserInfo函数处理，state的userInfo属性被改变，userInfo的变化导致demo.vue中computed属性的userInfo被执行，接着dom更新，用户信息被显示。