如何在vue-cli中使用vuex呢？

前言

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex使用场景

什么是vuex呢？它能做什么呢？虽然官方解释过了，但是有的人可能还不是太明白在什么情况下什么时候用，举个栗子：用户登录后，我需要在A页面，B页面，C页面都要用到登录的信息。可能你会将登录信息保存到sessionStorage中，这样是可以去取到数据，但是如果我们的需求是在编辑个人信息的时候把信息再更新呢，虽然你还可以覆盖sessionStorage的信息，但是我们打开F12找到sessionStorage会发现，我们是可以更改存储的信息的。所以问题来了，存储sessionStorage又不安全，又可以随意更改请求的参数数据到后台，又暴露了个人信息，到底有没有一种较为安全的方式来解决现在的问题呢？答案是当然有，vuex就是帮助解决问题的，它不但可以集中管理你的数据，在每个页面都可以调用登录信息，而且还可以通过编码的方式去修改你的数据，这些是对用户全部不可见的，所以你碰到的问题迎刃而解，所以你如果有这样想使用和操作公共状态的需求，那就使用vuex吧！

vuex概念讲解

1.State：也就是我们要管理的状态数据。

2.Getter：可以理解为普通的get方法之类的，又经过了一层方法处理来包装state，然后你通过getter获取。

3.Action：操作状态的动作，比如页面点击按钮触发事件。

4.Mutation：实际状态修改的地方，一些修改状态的逻辑都是在这里操作。

 

使用vue-cli创建vue项目

安装教程可以参考我的另一篇博客：https://blog.csdn.net/qq575792372/article/details/83864956

 使用vue-cli脚手架创建项目后，目录结构如下：

vue中使用vuex

1.创建store文件夹，并创建index.js文件

// 引入vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 使用vuex到vue的子组件里
Vue.use(Vuex)
const store = new Vuex.Store({
  // 开启严格模式，状态变更必须由mutations引起才可以
  strict: process.env.NODE_ENV !== 'production',
  // state状态数据
  state: {
    text: 'default text'
  },
  // 提供getter来处理state并返回
  getters: {
    gettersText: (state) => (id) => {
      return state.text + '-通过getter调用'
    }
  },
  // 事件触发的地方，只传递事件
  actions: {
    changeText: ({
      commit
    }, action) => {
      commit(action)
    }
  },
  // 实际进行状态修改的地方，一些逻辑处理在这里进行
  mutations: {
    CHANGE_TEXT: (state, action) => {
      state.text = 'gsw'
    }
  }
});
export default store;

2.打开main.js文件，在vue实例中使用vuex

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'


// other
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: ''
})

3.在App.vue中演示我们的例子

vuex中状态的获取和修改

1获取state状态有两种方式

1.使用this.$store.state获取状态数据：{{this.$store.state.text}}

2.从vuex中引入mapGetters后，可以使用提供的辅助函数mapGetters来通过computed获取：{{gettersText()}}

2修改vuex的状态有多种方式，你可以直接commit到mutations中修改数据

 this.$store.commit({
     type: 'CHANGE_TEXT', text: '我是新修改后的ddd'
  })

也可以使用dispatch触发action，通过回调方式commit到mutations中修改数据

this.$store.dispatch('changeText', {
    type: 'CHANGE_TEXT', text: '我是新修改后的ddd'
})

结束

最后附图一张，有图有真相，上面的3部分贴到代码里就可以直接运行