vue使用store

素颜马尾好姑娘i 2022-11-02 11:50 143阅读 0赞

vue使用store，我的通俗理解是store里的是全局变量，只要改变变量后，其他页面在次使用，获取到的就是改变后的值。  
src下创建store文件夹  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]  
**index.js**

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const state ={ 
      userinfo: 'lin',
    }
    const getters ={ 
      get_userinfo:state=>{ 
        let userinfo = state.userinfo
        return userinfo
      }
    }
    const mutations ={ 
      set_userinfo (state, data) { 
        state.userinfo = data
        localStorage.setItem('userinfo', JSON.stringify(data))
      },
    }
    export default new Vuex.Store({ 
      getters,
      state,
      mutations
    })

这里要装vuex，安装命令：**npm install --save vuex**  
引入  
**main.js**

import store from './store'
    new Vue({ 
      el: '#app',
      router,
      store,
      ...
    })

获取userinfo: ‘lin’,

<template>
      
      <div>{
       {$store.getters.get_userinfo}}</div>
    </template>
    <script> export default { name: 'My', data () { return { //data里的用法 this.$store.getters.get_userinfo msg: this.$store.getters.get_userinfo } }, mounted(){ //读取全局变量 console.log( this.$store.getters.get_userinfo) //修改全局变量 修改要用commit 然后commit(key,value) key是名，要和mutations下的set_userinfo一致 value是修改的值 this.$store.commit('set_userinfo','wu') //在一次获取，就变成wu console.log( this.$store.getters.get_userinfo)//输出'wu' } } </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]: /images/20221024/e6bdc2545a6649faa2cc0fa5b67856f0.png