VueX面试题综合

vuex概念:

vuex是一个状态管理工具，将状态放在仓库中，让其它组件调用

vue是单向数据流，子组件不能直接修改父组件的数据，而通过vuex状态管理实现：把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
vuex的整体结构并不复杂，知识规范比较繁琐，自己多试几遍就好了。

简单使用：

<h1 @click="btn(val)">{{str}}</h1>
<h1 @click="btns(val)">actions</h1>

import {mapState} from 'vuex'
import {mapGetters} from 'vuex'
import {mapActions} from 'vuex'

export default{
    name:"Home",
    computed:{
        ...mapState(['str']),

        //modules调用
        ...mapState({
            cartName:state => state.cart.name,
        }),
        ...mapGetters(['changeArr'])
    },
    methods:{
        ...mapMutations(['btns'])
        ...mapActions(['btns'])
    }
}

modules/cart.js
//modules 定义
export default {
    state:{
        name:'购物车'
    },
    getters:{

    },
    mutations:{
        
    },
    actions:{

    }
}

store/index.js
//modules 导入
import 'cart' from 'cart.js'

export default new Vuex({

    //modules 引用
    modules：{
        cart,
    }，
    
    state:{
        str:"你好",
        arr:['a','b','c'],
        num:0
    },
    getters:{
        changeArr(state){
            return state.arr.join('-');
        }
    },
    mutations:{
        btn(state,val){
            console.log(val);
        },
    }，
    actions:{
        btns({commit},state){
            console.log(val);
        },
    }
   
})

1. Vuex有哪些属性呢？

state：存放状态

getters：返回对state数据的装饰.例如返回格式化后的时间。相当于computed，有缓存。

mutations：相当于methods,并且是同步，异步可能会产生错误

actions：不是直接变更状态，而是提交mutations（这是约定，当然可以写方法，但是不推荐） actions是异步的

modules：细分以上模块，让仓库更好管理 , 如何使用以上已标出

2. mutations和actions的区别？

mutations只能进行同步操作，不能进行异步，否则Vue调式工具无法正常的监听

例如

mutations:{
    btn(state,val){
        setTimeout(function(){
         state.num++   
        })
    },
}，

这样调式是没有办法进行正常监听的,需要用actions调用mutations

actions:{
    btns({commit},state){
        setTimeout(function(){
            commit('btn');
        },1000)
        
    },
}

3. Vue是单向数据流还是双向数据流?

Vuex是单向数据流

A B C D 组件只能使用state数据，但是不能更改

methods:{
 changeVal(){
     console.log(this.cartName);//可以输出
     this.cartName = '汉';//无法更改，只能使用Vuex的mutations
 }
}

双向数据是 v-model 互相改变 , 而如果v-model 绑定 cartName ，就只能显示，更改会报错

4. Vuex如何做持久化存储

为什么页面改变了Vuex的值，刷新却变了？

Vuex本身不是持久化存储，持久化存储要使用cookie、localStorage

4.1 使用localStorage

store/index.js
state:{
 str:localStorage.getItem('str')||1;
},
mutations:{
 changeStr(state,val){
     localStorage.setItem('str',val);
 }
}

4.2 使用插件

https://juejin.cn/post/6844903650427404302