Vue scaffolding installation, here I will not introduce the focus!

Install vuex

npm install vuex --save
Copy the code

With the installation successful, we are now ready to use vuex

First, create the store folder under the SRC directory, as shown in the figure

1: index.js is an entry file

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './store'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations
})
Copy the code

Import all the files we need into it, inject and export!

2: store. Js file, this is where we initialize the data, this is where we store the data later, here I first initialize a review empty object!

const state = {
  review: {}
}

export default state;
Copy the code

3: mutation-types. Js is our constant, which is convenient for us to call in mutations later! I’ll wait for a constant here: SET_REVIEW

export const SET_REVIEW = "SET_REVIEW"
Copy the code

4: getters. Js which you can see is a vue calculated property:

export const review = state => state.review
Copy the code

5: mutations. Js, submit mutations is the only way to change the status in store in VUex

import * as types from './mutation-types'
const mutations = {
  [types.SET_REVIEW](state, review) {
    console.log("review", review)
    state.review = review
  },
}

export default mutations
Copy the code

Action is similar to mutation, but does not commit any mutation. Actions can contain any asynchronous operation. Simply say: it is the operation of mutations, the reality of asynchronous operation! Here I’m getting data, so I’m not using action.js

The code is relatively simple, I will directly paste: index.vue home:

<! -- --> <template> <div> <span @click="linkTo()"> Link jump </span> </div> </template> <script type='text/ecmascript-6'> import { mapMutations } from "vuex"; export default { data() { return {}; }, mounted() { this.getReviewData(); }, methods: { getReviewData() { let _this = this; _this.$http .get("api/review/needlist") .then(function(response) { console.log(response.data); if (response.data.code === 0) { let list = response.data.list; _this.setReview(list); } }) .catch(function(error) { console.log(error); }); }, linkTo(){ this.$router.push({path:'review'}); },... mapMutations({ setReview: "SET_REVIEW" }) } }; </script> <style scoped> </style>Copy the code

This is the basic structure of the VUE component. Methods write a method to get data. GetReviewData ()! Calls the retrieve data method in the Mounted life cycle

Key:

We use the syntactic sugar provided by Vue to store data:

Introduce the mapMutations method of VUex

import { mapMutations } from "vuex";
Copy the code

We’ll put a setReview inside methods, which is like a method, exactly the same as when we call any other method:

. mapMutations({ setReview: "SET_REVIEW" })Copy the code

Finally, we pass the data from the interface into this method, and we’re done storing the data in the store!

_this.setReview(list);
Copy the code

Next, we can use the data in the Store

So let’s get the data in the store,

Create a new review.vue component:

<! -- --> <template> <div class="web"> <ul> <li v-for="(item,index) in review" :key="index"> <span>{{item.content}}</span> </li> </ul> </div> </template> <script> import {mapGetters} from 'vuex' export default { components: { }, data () { return { }; }, computed:{ ... mapGetters([ 'review' ]) }, mounted() { console.log(this.review); }, methods: {} } </script> <style scoped> </style>Copy the code

To get data we introduce:

import {mapGetters} from 'vuex'
Copy the code

Take the value in computed life cycle and finally we can render to the page! And finally, above:

Here we can get the data on another page.

Finally, let’s talk about: vuEX refresh data loss; Here we use localStorage localStorage. We can belong to the Vue component and store data in localStorage at the same time. Get it from localStorage where needed!

Here, I put localStorage in vuex, instead of storing it in every component, we store data in retro.js

localStorage.setItem('review', JSON.stringify(state.review));
Copy the code

Add the following code to store.js:

For (var item in state) {localstorage.getitem (item)? state[item] = JSON.parse(localStorage.getItem(item)) : false; }Copy the code

This solves our vuex refresh data loss problem!