Vuex 存值取值基本用法

Vuex存值取值基本使用步骤

1.进入项目，在命令行中输入安装指令

npm install vuex --save

2.在src目录下新建store/index.js文件

定义一个dataArr，供全局使用

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
dataArr: [], //数据
},
mutations: {
getDataArr (state, data) {
state.satellite = data
},
},
actions: {},
modules: {}
})

3.修改main.js

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store'; // 引入前面导出的store对象
Vue.config.productionTip = false;

new Vue({
router,
store, // 把store对象添加到vue实例上
render: h => h(App)
}).$mount('#app')

4.组件内获取接口返回的数据，存值：this.$store.commit(方法名,val)
```javascript
methods: {  
  fn() {
    this.$axios.get('你的接口地址').then((res) => {
      let dataArr = res.data.data
    }  
    this.$store.commit('getDataArr',"dataArr")   //第一个参数为mutations方法名，第二个参数为值
  }           
}

5.组件内取值：this.$store.state.XXX

export default {
  mounted() {
    console.log(this.getData);
  },
  computed: {
    getData() {
      return this.$store.state.dataArr;
    },
  },
};

6.第5步也可以通过下面方法实现

import { mapState } from 'vuex'; // 从vuex中导入mapState
export default {
  mounted() {
    console.log(this.dataArr);
  },
  computed: {
    ...mapState(['dataArr']), // 经过解构后，自动就添加到了计算属性中可以直接像访问计算属性一样访问它
  },
};

根据项目需求，也可以使用sessionStorage进行存值取值

1.存值：sessionStorage.setItem(key,value)

sessionStorage.setItem("username",user.name)

2.取值：sessionStorage.getItem(key);

sessionStorage.getItem("username")