Vuex

我们在接触前端JavaScript之后，慢慢的了解到了localStorage(本地存储)、sessionStorage(临时存储) 和Cookie三个存储数据的方式，这三个也是广为运用的存储方式，但是我们学习的Vue、React等主流框架，也有着属于自己的存储方法，Vue专属的vuex方法，React专属的redux方法，这篇文章呢，就带大家认识一下Vue中的Vuex，并浅入的了解一下Vuex，希望对大家有用，尤其是新手！

什么是Vuex? 认识Vuex!

vuex官网:Vuex 是什么？ | Vuex (vuejs.org)
对于新手而言呢，很好奇什么是vuex，有些接触过vue的道友，知道vuex，但是不会运用vuex，其实vuex很简单. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能，我们也可以认为vuex是我们当前项目的仓库。

什么情况下我应该使用 Vuex？

在了解了vuex的基础概念之后，很多人都不知道我们在写项目的时候，在什么时候运用vuex,请看以下讲解:
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

创建vuex仓库

在我们创建一个vue框架之后，我们会发现在我们src文件下有一个名为store的文件，store就是仓库的意思，这个就是我们的vuex位置

打开store文件下的index.js文件，我们会看见以下代码:\

import { createStore } from "vuex";
//引入安装的持久化
import createPersistedState from "vuex-persistedstate";

export default createStore({
    //存放变量，变量可以是任意类型
    state:{
    //这里数组为例
    data:[]
    },
    //写同步方法
    mutations:{
    //该部分参数为固定
    //方法里对data数组进行赋值操作
    /*
      state:接收上面的变量data数组
      params:接收从页面传过来的数据
    */
     setData(state,params){
        state.data = params
     }
    },
    //异步方法
    actions:{
        setDatas({commit},params){
          commit("setData",params)
        }
    }
    //模块化之后存放模块名称
    modules: {
      /*
      为了代码的整洁性，我们通常会把以上三个方法放入一个新创建的方法当中，进行模块化操作，抛出，在当前文件引用，
      这里放置的是引过来的模块名
      */
    },
    //namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
    //配置持久化
    /*
    持久化可以让我们存入到vuex当中的数据一直保持，刷新之后不会消失，给vuex加上持久化之后，vuex会把当前数据存储到本地存储当中，
    安装持久化:npm i vuex-persistedstate
    */
   
    plugins: [createPersistedState({
    //规定数据通过持久化存储到哪里，本地或临时
    storage:windows.localStorage,
    path:["需要存储的模块名称"]
    })]
});

vuex的存和取

我们配置完vuex仓库之后，我们要把需要的数据存到我们的vuex仓库当中

<template>
    <div>
        <input  v-model="input" type="text" name="" id="">
        <button  @click="changeFun">点击存储</button>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: 'WorkspaceJsonRes',
    data() {
        return {
            input:""
        };
    },

    computed: {
       //vuex取值操作
       //取出来的值可以直接用于赋值
       //不需要写this
       ...mapState("模块名",["要取的值"]) 
    },

    methods: {
    //vuex存值通过触发事件
    //这里是触发点击事件
        changeFun(){
        //vuex存值
            //commit是同步方法，在不拆分模块的情况下存值
            /*
             第一个参数是同步当中的方法名称
             第二个参数是方法接收的值params
            */
            this.$store.commit("setData",this.input)
            //commit是同步方法，在拆分模块的情况下存值
            /*
             第一个参数是同步当中的      模块名/方法名称
             第二个参数是方法接收的值params
            */
            this.$store.commit("user/setData",this.input)
            //dispatch是异步方法，在不拆分模块的情况下存值
            /*
             第一个参数是异步当中的方法名称
             第二个参数是方法接收的值params
            */
            this.$store.dispatch("setDatas",this.input)
        }
    },
};
</script>