1.手把手教你使用Vuex - 新建vue项目并安装vuex插件

🤓 OK，相信你看完上篇的文集介绍后，对vuex产生了浓厚的兴趣，哇！！！这是个什么神仙插件，我要用！！！
不要着急，这一篇咱们就来看看怎么在vue项目中使用起来vuex。
come on baby！💃

• 🤡 首先，我们先初始化一个项目，在这里我们来复习一下：

  • 使用命令行初始化 $ vue init webpack my-vuex

  • 选择你需要的配置（最后我一般选择yarn）

    
    image.png
  • 编译器打开

• 🤖 安装vuex

  • 进入项目中，运行命令yarn add vuex -S或者yarn add vuex这两种方式都会将vuex安装到你的package.json的dependencies里面，为什么呢，因为我们不只是开发用，我们线上也需要是吧，对于安装到devDependencies还是dependencies里面，请参考这里：Vue package.json中的devDependencies和dependencies的区别
    安装成功

• 🧐 配置vuex，使其工作起来

  • 创建store/index.js文件，文件位于下面的路径下

    src
     |__assets
     |__components
     |__store
          |__index.js
    

    文件内容如下：

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state:{
        loading: false,  <----- 定义一个loading状态，以供全局使用
        todoList : [    <----- 定义一个todoList列表，以供全局使用
          {id:1,name:'11'},
          {id:2,name:'22'},
          {id:3,name:'33'},
        ]
      }
    })
    
    export default store
    

  • 修改main.js

    import Vue from 'vue'
    import App from './App'    
    import store from '@/store/index'   <----- 导入我们上面导出的store对象
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      components: { App },
      store, <----- 添加到vue实例上
      template: '<App/>'
    })
    

  • 修改App.vue

    <template>
      <div id="app">
        <h2>Are you OK?</h2> <----- 换成你喜欢的话，hhh
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      mounted() {
        console.log(this.$store.state.todoList); <-----即可直接输出vuex里面的todoList状态
      }
    }
    </script>
    
    <style>
    #app {
      text-align: center;
      margin-top: 60px;
    }
    </style>
    

  • 🤪 此时，启动项目yarn dev，即可在控制台输出刚才我们定义在store中的todoList的值。
    

    image.png

  • 🤖 官方建议1
    官方建议我们以上操作this.$store.state.XXX最好放在计算属性中，当然，我也建议你这么使用，这样可以让你的代码看起来更优雅一些，就像这样(多余的代码就不贴出来了)，此时可以得到和上面一样的效果：

    export default {
      name: 'App',
      computed:{
        getTodoList(){
          return this.$store.state.todoList
        }
      },
      mounted() {
        console.log(this.getTodoList);
      }
    }
    

  • 🤖 官方建议2
    是不是每次都写this.$store.state.XXX让你感到厌烦，你实在不想写这个东西怎么办，当然有解决方案，就像下面这样(多余的代码就不贴出来了)：

    <script>
    import {mapState} from 'vuex'  <----- 从vuex中导入mapState
    export default {
      name: 'App',
      computed:{
        getTodoList(){
          return this.$store.state.todoList
        },
        ...mapState([  <----- 解构到计算属性中
          'loading'  <----- 你想使用的state中的值
        ])
      },
      mounted() {
        console.log(this.loading);  <----- 经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样，访问它。
      }
    }
    </script>
    

    你甚至可以在解构的时候给它赋别名，取外号，就像这样(部分代码)：

    ...mapState({
      aliasName:'loading'
    })
    

🤗 至此，vue项目初始化并且安装上vuex就结束了，此时你可以很轻易的在你的项目任意地方通过this.$store.state访问到vuex，是不是十分方便呢？接下来，我们介绍一种”修饰读“的方案---Getter。