如何使用vuex插件

一.使用前需要做的事情
1.理解什么是vuex？
学习到vue之后最常见的就是使用父子组件传值的问题，但是当我们在进行一个较大型的新项目开发时候，组件关系较为复杂如果还坚持使用父子组件的话将会异常繁琐，再加上有些数据需要几个组件同时共享，所以这时候我们采用了vuex（Vue状态管理模式)。
2.安装vuex插件
npm i vuex -s
二.使用vuex
1.
1）创建store文件

2）index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建Vuex对象
const store = new Vuex.Store({
  state:{
    //存放的键值对就是所要管理的状态
    name:'helloVuex'
  }
})

export default store

3）Helloworld.vue组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>{{$store.state.name}}</h3>
  </div>
</template>

2. Mutations使用方法

mutation方法是用于，加工this.$store.state当中的属性的，例子中后面带了state与payload的参数，第一个参数是指Vuex实例中的state对象部分，payload代表需要传入的参数，可以是对象,要想该组件对Vuex取得的值进行加工可以通过调用this.$store.commit(‘方法名’,‘传入参数’)，注意mutation只能够进行同步操作，如需异步操作需要操作Actions。

3.删除state中成员
新增：

Vue.set(state,"number",8)

删除：

Vue.delete(state,"number")

4.Getters
Getters作用在于进行加工取到的参数，并输出。


5.Actions
Actions中的方法有两个默认参数
1.context 上下文(相当于箭头函数中的this)对象
2.payload 挂载参数在这里插入图片描述