VueX的介绍及使用

前言

        很多朋友在写前端代码的时候看不懂VueX的使用方法，以及不了解它的使用情况，这篇文章简单讲解一下Vuex。首先，说一下VueX的概念，它是为了方便各个组件之间互通数据而公共存放数据的地方。当然，也可以简单的理解为网上常说的把它当成一个仓库。并且这个仓库是实时更新的，数据与页面同步。

一、安装VueX

1. 安装vuex依赖:

   npm install vuex --save

   终端运行以上代码

2. 创建仓库实例：

   // 导入Vue
   import Vue from 'vue'
   // 导入VueX
   import Vuex from 'vuex'
   
   // 进行插件的初始化
   Vue.use(Vuex)
   
   
   // 创建仓库
   const store = new Vuex.Store({
       // strict 控制是否开启严格模式
       strict: true,
       // state 状态
       state: {
           count: 001
       },
       // mutations定义的方法
       mutations: {
           // 创建一个操控数据的方法， 第一个方法中的传参必须是state
           addCount (state) {
             state.count += 1
           }
       },
       // actions处理异步操作, actions中没办法直接处理state中的值，只能通过调用mutations的方法才行
       actions: {
           addAsync(context) {
             setTimeout(() => {
               context.commit('addCount')
             }, 1000)
           }
       },
       getters: {
           showNum(state) {
             return state.count
           }
       }
   })
   
   // 抛出仓库
   export default store

   一般会创建store文件夹，其中新建index.js文件夹

3. 将vuex挂载到实例：

   // 引入store仓库
   import store from './store'
   
   // 
   new Vue({
     store
   }).$mount('#app')

   在main.js中挂载

二、使用仓库

        测试一下我们刚刚新建的仓库，this.$store就可以直接调用。

created(){
  console.log(this.$store)
}

        如果要修改$store中的值，必须调用mutations中的方法，如果直接修改，会出现报错

this.$store.commit('addCount')

        如果要在调用方法是时候传值，直接写在方法后面

this.$store.commit('addCount', 10)

        如果要调用vuex中的异步方法，必须调用dispatch方法

this.$store.dispatch('addAsync', 10)

        getters类似于vue中的计算属性。state中的数据发生变化，getters中的数据也会发生变化

this.$store.getters.showNum()

        这样，基本的使用方法就介绍完成了，想要学习更多的详细信息，可以去参考Vuex的官方文档：https://vuex.vuejs.org/zh/

---

        愿世界永无bug