1：先创建一个文件夹

首先我们要新建一个store文件夹，里面自定义一个index.js的文件,如果项目过大可再加一个modules文件夹下面写js文件

 

我们在写vuex的时候 先从外再到内，比如说 如果你想吃饭，我们就先拿个碗再去盛饭，下面开始展示代码，在user.js中

export default {
    state: { //定义数据
        userInfo: []
    },
    getters: {},
    mutations: { //定义方法
        AddshopInfo(state, value) {
            state.userInfo .push( value );
        }
    },
    actions: { //异步触发mutations里的方法
        AddshopInfoAsync(context, value) {
            context.commit('AddshopInfo', value) //异步触发
        }
    },
    modules: {},
    namespaced: true, // 命名空间

}

在store下的index.js 里面 引入 module文件夹下的 index.js ，

引入完成 ，挂载到 modules 属性下面

import Vue from 'vue'
import Vuex from 'vuex'

import createPersistedState from 'vuex-persistedstate'
import shop from "./modules/index.js"
Vue.use(Vuex)

export default new Vuex.Store({
    //将引入的模块 挂载到 modules属性内
    modules: {
        shop
    },
    plugins: [
        createPersistedState({
            // 存储方式：localStorage、sessionStorage、cookies
            storage: window.sessionStorage,
            // 存储的 key 的key值
            key: "shopCar",
        })
    ]
})

localStorage：可长期存储数据，除非用户清楚localStorage信息，否则数据会一直存在。同一中浏览器之间，不同页面，数据可以共享。
sessionStorage：短期存储数据，用户关闭标签页后或直接关闭浏览器后数据会清空。同一浏览器不同页面之间，数据不可共享
使用方法相同。

使用的方法如下：

先在你需要的地方 引入   mapActions 和  mapState

import {mapActions,mapState} from "vuex"

 在 methods 方法中

...mapActions('shop',["AddshopInfoAsync"]),

 shop 是存储的名字

"AddshopInfoAsync" 是方法的名字

异步触发方法 然后穿参数到user.js 中

 // 调用 vuex 异步触发方法 传参
               this.AddshopInfoAsync(...)

在 computed方法中    

...mapState("shop",["userInfo"])

 先在 获取到了 userInfo中的数据了 ，可以对 userInfo 里面的数据 修改，添加等

可以在页面中修改等操作， 也可以调用这个值，渲染值