[JavaScript知识库]在vue项目中如何利用vuex进行数据存储？

首先要理解vuex的两种数据流：

异步时：数据流向，同步则无dispatch和actions，下面以异步的完整流向为例

componentsA --> dispatch --> actions -->?commit?--> mutations --> state --> render

--> componentsB

假设现有组件A，需要传数据（这里的数据可以是值，对象...）给vuex保管

在组件A的某个函数被调用时，把值通过dipatch传到actions

具体代码为

this.$store.dispatch("actions中的方法名",传递的数据)

传递之后在actions中的方法名中需要进行commit，提交给mutations

具体代码为

//注意这里的方法名必须与dispatch中的方法名保持一致
//这里的context，相当于是个简版的$store,可以自己打印去比较
const actions = {
  方法名(context, playload) {
    //console.log(context)   
    context.commit('方法名', playload)
  }
}

提交完commit，就意味着可以在mutations中修改state中的值了，state中的值自己去定义

//有些刚用的铁铁可能不明白这个playload
//这里的第二个参数playload正是你dispatch过来的值，也就是需要交给vuex保存的值


//xxx是state中自己定义的变量名，这一步就把传递过来的数据给到了vuex，也就是说
//下次我们在其他组件中要用到组件A传递过来的值，其实用到的就是state中的xxx

const mutations = {
  方法名(state, playload) {
    //若想解决vuex刷新带来的数据丢失，在修改state之前，加上下面这行代码将它存入到本地
    //非必要可以不加
    localStorage.setItem('自己取一个token名称', JSON.stringify(playload))

    state.xxx= playload
  }
}

const state = {
    //这里的xxx要声明类型，你传的数据是什么类型，xxx就是什么类型!!!
  xxx: ""
}

到这一步传的步骤就做完了，

[vuex] unknown action type: 报这个错的铁铁，自行关闭命名空间！！

那怎么取vuex的数据呢？ 举例：我们现要取在Vue项目中的B组件使用传输值。

先说一下vuex的取值原理，原本我们要正常使用的数据要么是在data中的，或者是props传过来的

，再或者就是通过计算属性的到的。这也是为什么取值的时候要把取得值作为属性写在computed中。

现在介绍两种取值的方法：1. return+属性（low）? ?2.辅助函数的形式...mapState的形式（NB）

先说第二种，企业中用的很多！！！下面的代码写在取值的组件中

<script>
import { mapState } from 'vuex'  
export default{

//法2
computed:{
        ...mapState({
            //假设传的是个id;
            //为啥是箭头函数+state? 问这个就是你基础还太弱了
            //我们在computed中计算属性是，都是有函数的，只不过这里用箭头函数更快
            //参数就是vuex中的state，通过state获取的id。

            id:state=>state.文件名(js的文件名,非团队开发没用modules这个直接跳过).id
            //这种方式取值没有问题，但是为了解决刷新或者组件切换带来的数据丢失，使用
            //法2的加强版


            //加强版如下：
            id (state) {
               if (localStorage.getItem('bookObj')) {
                state.(文件名).params = JSON.parse(localStorage.getItem('bookObj')) || {}
                }
              return state.(文件名).id
           }

        })
    }

//法1：
computed:{
        id(){
            return this.$store.state.(文件名).id
        }
    }
}

</script>

在B组件中使用插值表达式{{id}}直接渲染就ok了