Vuex的使用

Vuex的使用

说明

vuex是一个用在vue中来管理状态的插件，何为状态？一个变量为一个值，一个对象被赋予，这都是一种状态，而vuex就是在vue中的全局可以访问的管理器，可以理解为管理“全局都在使用的变量”，

tips：本篇仅为自我意愿，不同意见，友善讨论

使用

首先得先安装vuex

安装

vue2中使用的是vuex的3.x版本，而vue3版本必须使用4.x以上的版本。以此此步安装失败应当按照你的vue版本进行指定版本安装，不指定版本默认的是安装最新版的，也就是vue3使用的版本。以目前我使用的"vue": "^2.6.14"为例，应当指定安装版本 "vuex": "^3.6.2"

• npm install vuex
• 指定版本安装npm install vuex@3.x

注册

按照正常的插件使用思路是应当在main.js中去使用这个vuex，但是在vuex进行创建的时候，就必须安装到vue上，所以我们使用外部的js文件进行配置时，只需要在外部的js文件中进行安装配置就行，而不用在main.js中进行配置和安装，

/src/store/index.js

• import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  // 控制首次传输进来的处理，第一上下文，第二value
  const actions = {
    //进行额外的操作，比如连接服务器获得额外数据  
      jia(context,value){        
          context.commit("JIA",value)
      },   
      //直接进行赋值操作，方便全局获取此值
     choose(context,value){
          context.commit("CHOOSE",value)
      },
  }
  //在这里执行的操作，在mutations的方法为了和actions中作为区分，一般写作大写，
  const mutations = {
      JIA(state,value){
          state.sum += value
      },
      CHOOSE(state,v){
          state.choose = v
      },
  }
  const state = {
      sum:0,
  }
  const store = new Vuex.Store({
    actions,
    mutations,
    state
  
  })
  export default store
  

在一些大型项目中，当这里的属性过多的时候，可以将其单独的抽离成一个js文件，然后在index.js文件中进行导入即刻

/src/main.js

• import Vue from 'vue'
  import App from './App.vue'
  import router from '@/router/router'
  import store from '@/store'
  Vue.config.productionTip = false
  new Vue({
    router,
    store,
    render: h => h(App),
  }).$mount('#app')
  

将配置文件扔进vue的构建对象，

调用

注册成功后，在vue的实例上就存在了一个属性，叫做$store这里面就是vuex的操作和属性

赋值：

• this.$store.dispatch("choose", choose);
  //这里调用了actions中的一个choose方法，所以你的确认你的actions中存在choose，然后将这里的值传递了过去，成为了上方的value
  

获值：

• this.$store.state.choose
  //这里调用的是我们在store配置文件中的state下的对象，因此，确保它存在
  

END

到此，就可以正常使用vuex的基本操作啦，如果是更加细枝末节的，还需要结合官方文档理解，此处仅仅是将vuex作为一个“全局变量来“进行操作，友善讨论。
！！！当你在页面中使用js文件，因为负担很小时，需要万分注意，一些格式化的数据还是从后端数据库中取吧，在使用js尝试读取1k条时，vue的刷新变得异常缓慢，当然也不乏是本机电脑问题，但是将数据全部上传数据库后，刷新恢复了正常。因此，刷新缓慢，试着更改以下数据的获取方式，换个地方，少量获取。