vuex结合localStorage的使用方法

源码地址：https://github.com/andyzhang0511/VuexStudy
vuex学习参考文章：https://www.cnblogs.com/chinabin1993/p/9848720.html
参考链接1
参考链接2
参考链接3

先看一下我的目录结构:

1.main.js 入口 加载组件 初始化等

import Vue from 'vue'
import App from './App'
import store from '../store/index'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

2.store.js—index.js 总文件

import Vue from "vue";
import Vuex from "vuex";
import state from './state';
import getters from './getters';
import mutations from './mutations';
import actions from './actions'
Vue.use(Vuex);

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

3.store.js—state.js 状态数据存储

const state = {
    productList: [
        { name: "goods 1", price: 100 },
        { name: "goods 2", price: 200 },
        { name: "goods 3", price: 300 },
        { name: "goods 3", price: 400 }
    ],
    shopList: [
        { name: "shop 1", address: "aaaaa" },
        { name: "shop 2", address: "bbbbb" },
        { name: "shop 3", address: "ccccc" },
        { name: "shop 4", address: "ddddd" }
    ]
}
export default state

4.store.js—mutations.js （改变state.js里的值，顺便利用localStorage存储本地值，使得刷新浏览器后数据不会消失）

const mutations = {
    // reducePrice: (state, payload) => {
    //     return state.productList.forEach((product, index) => {
    //         localStorage.setItem('ceshi' + index, product.price)
    //         product.price -= payload;
    //     });
    // }
    reducePrice: (state, payload) => {
        state.productList.forEach((product, index) => {
            product.price -= payload;
        });
        localStorage.setItem('ceshi', JSON.stringify(state.productList))
        return state.productList
    }
}
export default mutations

5.store.js—actions.js

const actions = {
    // 提交的是mutation，可以包含异步操作
    // 这里我在两个方法中使用了两个不同的参数，一个是context，它是一个和store对象具有相同对象属性的参数。
    reducePriceAsync: (context, payload) => {
        setTimeout(() => {
            context.commit("reducePrice", payload);
        }, 2000);
    }
    // 也可以这么写  实际开发项目中我多数是这么写的
    // reducePriceAsync: ( {commit}, payload) => {
    //     setTimeout(() => {
    //         commit("reducePrice", payload);
    //     }, 2000);
    // }
}
export default actions

6.store.js—getters.js(使用getters来获取我们的state，因为它算是state的一个计算属性)

const getters = {
    getProductList: state => {
        return state.productList;
    },
    getShopList: state => {
        return state.shopList;
    },
    getSaledPrice: state => {
        localStorage.getItem('ceshi') ? 
        state.productList = JSON.parse(localStorage.getItem('ceshi')) : ''
        let saleProduct = state.productList.map(item => {
            // item.price = localStorage.getItem('ceshi'+index)
            console.log(item.price)
            return {
                name: "**" + item.name + "**",
                price: item.price / 2
            };
        });
        return saleProduct;
    }
}

export default getters

最后贴上两个组件的代码：
listOne

<template>
  <div class="list-one">
    <h1>list one</h1>
    <ul>
      <li v-for="(product, index) in getSaledPrice" :key="index">
        <p>名称：{{product.name}}</p>
        <p>价格：{{product.price}}</p>
      </li>
    </ul>
    <button @click="reducePrice(4)">降价</button>
    <button @click="reducePriceAsync(4)">异步降价</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions, commit, mapState } from "vuex";
export default {
  // data(){
  //   return {
  //     getSaledPrice: this.$store.getters.getSaledPrice
  //   }
  // },
  computed: {
    ...mapState(["productList"]),
    ...mapGetters(["getProductList", "getShopList", "getSaledPrice"])
  },
  methods: {
    // reducePrice(){
    //     this.$store.commit('reducePrice', 2)
    // },
    // reducePriceAsync(){
    //     this.$store.dispatch('reducePriceAsync', 2)
    // }
    // this.$store.commit(mutationName)是用来触发一个mutation的方法
    // this.$store.dispath(actionName)是用来触发一个actionName的方法
    ...mapMutations(["reducePrice"]),
    ...mapActions(["reducePriceAsync"])
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
.list-one {
  margin: 5px;
  padding: 8px;
  background: rgb(236, 199, 199);
}
ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  padding: 5px;
}
li {
  cursor: pointer;
  margin: 5px;
  width: 100%;
  flex: 1;
  text-align: center;
  color: #fff;
  background: rgb(107, 179, 207);
}
button {
  padding: 5px 15px;
  border: none;
  font-size: 14px;
}
</style>

listTwo

<template>
  <div class="list-two">
    <h1>list two</h1>
    <ul>
      <li v-for="(product, index) in getProductList" :key=index>
        <p>名称：{{product.name}}</p>
        <p>价格：{{product.price}}</p> 
      </li>
  </ul>
</div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'getProductList',
      'getShopList'
    ])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
.list-two {
  margin: 5px;
  padding: 8px;
  background: rgb(252, 242, 199);
}
ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  padding: 5px;
}
li {
  cursor: pointer;
  margin:7px 0;
  width: 100%;
  flex: 1;
  background: #ccc;
}

</style>

关于localStorage的使用请见：
https://www.jianshu.com/p/2eb4ee865874
https://www.cnblogs.com/LChenglong/p/7497368.html