vuex入门讲解及使用

首先我们要知道vuex是什么？

它是一个vue的状态管理工具，用来存储我们所有组件的状态，核心就是store仓库。众所周知，Vue是单项数据流，而假如我们在做一个大的项目时，还使用组件传参来同步data的值时，那么子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信，这时我们就会面对一个问题，如果子组件 A 的父组件上面还有一层爷爷组件，或者还有更多祖父类型的层级，那样的话就会很麻烦，在后期的维护和管理上也会变得很棘手，这个时候就需要有一个状态的管理工具来统一管理所有组件的状态，在用的时候自己去拿而不需要一层层的传递，减少多个组件中的频繁操作，这个时候vuex就应运而生了，在vuex的vue项目中操作时，我们只需把这些值定义到定义到vuex中，就可以在所有组件中使用。
好了，在我们知道了以上这些之后，接下来就正式进入我们vuex中去使用它：

1、vuex安装：

npm i vuex -s  

安装完之后在项目的根目录下新增一个store文件夹，在该文件夹内创建index.js
如图：

2、使用

1.2.1 初始化store下index.js中的内容

1.2.2 打开main.js将store挂载到当前项目的Vue实例当中去

1.2.3 在组件中使用Vuex
在App.vue中，将state中定义的name值放到h1标签中显示

或在组件方法中使用

vue提供了一种开发工具VueDevtools插件，在开发项目中可以监控项目中的各种值，提高效率。具体使用方法可以参照vue官网。

3、VueX中的核心内容

vuex 中最关键的是store对象，这是vuex的核心可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。
创建store：const store = new Vuex.Store({...});
store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：
state --- 状态存储（变量）
mutations --- 对state的操作，修改状态并且时同步的：$store.commit(" ",params)
getters ---对数据获取前的再次编译，可以理解成state的计算属性：$store.getters.fun()
actions --- 异步操作：$store.dispath()
modules --- store的子模块，主要适用在大型项目开发时，方便状态管理而使用的
关于store需要记住两点：
1、store中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；
2、不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

4、 VueX的工作流程

1、vue组件在调用某个vuex的方法过程中需要向后端请求或异步操作时，dispathVuex中的actions的方法，来保证数据的同步。
2、若没有异步操作，那么我们可以直接将自己编写的方法通过组件内提交到mutations，达到对state的操作，而在组件中最好不要直接对state进行操作，因为直接修改的话不能被vueDevtools监控。
3、被修改后的state成员会被渲染到组件的原位置上。