五分钟带你玩转vuex（vuex入门）

前言：
我们接触过vue.js的 一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，那么接下来我们就来学习一下vuex是如何修改状态值的：

一：什么是vuex？

1.1：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态（他是集中管理数据的工具）。

1.2 vuex的优点：

• 可以实现父子传值，兄弟传值，隔代传值
• 能够存放组件之间共享的数据
• 解决大中型项目中数据共享的问题

二：vuex的组成？

1.state：存储状态（变量）
2. getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们 在组件中使用$ store
3. mutations： 修 改 状 态 ， 并 且 是 同 步 的 。 在 组 件 中 使 用$ store.commit(’’",data)。这个和我们组件中的自定义事件类似。
4. actions：异步操作。在组件中使用是$store.dispath(‘自定义事件名’,’'传递的参数)
5. 5. modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

三：玩转vuex的两种方法：

3.1 第一种：

3.1.1 安装：

npm installl vuex --save

3.1.2 创建一个store文件夹，里面放入index.js。在main.js里面引入，注册。

3.1.3 操作一波~

页面

<template>
  <div class="home">
    <h3>这是主页</h3>
   <button @click="prev()">减</button>
    {{this.$store.state.count}}
    <button @click="next">加</button>
 </div>
</template>
<script>
import { Sumcode } from '../http/api';

export default {
  name: 'Home',

  methods: {
      next(){
      this.$store.dispatch('next',)//通过dispatch请求发送到action
    } 
    },
    }
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//用来存储数据的
  state: {
    count: 1
  },
  mutations: {
  //在motations里面我们改变state的状态来实现数量的加加减减
    next(state,value){
      state.count++;
     },
    prev(state){
      state.count--;
    
    },
  
  },
  actions: {
  //在这里我们异步操作 发送到motation里面
    next(context){
 
      context.commit('next')
    },
    prev(context){
    
      context.commit('prev')
    },
  },
  //这个也就是我们上面所说的store 的子模块。这样的话比较清晰
  modules: {},
  getters:{}//这个相当于我们vue中的computed计算属性
 // 页面中我们直接通过this.$store.state.getters.data
})

3.2 第二种：

我们使用 …[mapstate] …[mapaction]来实现

import {mapState,mapActions,mapMutations} from 'vuex';
//我们在store里面定义一个count
//store.js：
state：{
count：1
token:'dsfagsrdrgafdvth6',
index:5
}
//页面中：
通过computed中注入mateSate
    computed: {
    	...mapState(['count', 'token', 'index'])
    }
 //   这样的话我们在页面中直接通过{{count}},{{token}}{{index}}直接来获取
// 这个方法的好处就是我们不用写那么长的前缀 哈哈哈
 methods:{
    ...mapActions(['next','prev'])
    //自定义派发两个事件名
 }

 //在actions中方法中通过commit('mutaions方法名',要传递的值);

dispath commit 逻辑操作
vue组件---------->actions--------->mutations------->改变state---->最终同步到vue组件视图上

四：数据持久化操作：

4.1 ：localstorage sessionstorage

存值： localstorage.setItem(‘我们要存的数据名称’,存的值)
取值： localstorage.getItem(‘存储时候的那个数据名称’)

4.2

例如：vuex-persistedstate

使用方法：

第一步：安装：


npm install --save vuex-persistedstate


第二步：在vuex中的index.js引入
import createPersistedState from "vuex-persistedstate";

第三步：在vuex实例上通过plugins注入
export default new Vuex.Store({
  ...
  plugins: [createPersistedState()]

})

这样的话我们在后端就可以直接看到了。