escritura tienda y estado de lectura

1 tienda vue de la escritura y lectura

Crear un almacén de carpetas 1.1
archivo de escritura 1.2 js

const state = {  // this.$store.state.
    username: null,
    token: null,
    brandArr: [], // 记录访问路径
    shopStatus: '0'
  }
  // 获取数据 对外暴露
  // mautation 内部调用，外部不允许调用
  const mutations = {
    setUsername (state, username) {
      state.username = username
    },
    setToken (state, token) {
      state.token = token
      localStorage.setItem('token',state.token)
    },
    setShopStatus (state, shopStatus) {
      state.shopStatus = shopStatus
    },
  }
  // 修改数据 对外暴露
  // 调用方式： store.dispatch(方法名, 参数)
  const actions = {  // this.$store.dispatch('setToken', res.data.data.token)
    setUsername ({commit}, username) {
      commit('setUsername', username)
    },
    setToken ({commit}, token) {
      commit('setToken', token)
    },
    setShopStatus ({commit}, shopStatus) {
      commit('setShopStatus', shopStatus)
    },
  }
  export default {
    state,
    actions,
    mutations
  }

1.3 Ejemplos de la tienda

introducido en el archivo correspondiente en la tienda Los index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user/user'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    user
  },
  plugins: []
})

1.4 en la página (archivo .vue) almacena los datos en el almacén

this.$store.dispatch('setUsername', res.username)

1.5 (archivo) .vue los datos leídos de la tienda en la página

 computed: {
      // 个人账户
      userName() {
        return this.$store.state.user.username
      }
  }

Conservar en el marco de escritura y lectura 2 nuxt

Crear un almacén de carpetas 2.1
archivo de escritura 2.2 js

export const state = （）=>({  // this.$store.state.
    username: null,
    token: null,
    brandArr: [], // 记录访问路径
    shopStatus: '0'
  })
  // 获取数据 对外暴露
  // mautation 内部调用，外部不允许调用
  export const mutations = {
    setUsername (state, username) {
      state.username = username
    },
    setToken (state, token) {
      state.token = token
      localStorage.setItem('token',state.token)
    },
    setShopStatus (state, shopStatus) {
      state.shopStatus = shopStatus
    },
  }
  // 修改数据 对外暴露
  // 调用方式： store.dispatch(方法名, 参数)
 export  const actions = {  // this.$store.dispatch('setToken', res.data.data.token)
    setUsername ({commit}, username) {
      commit('setUsername', username)
    },
    setToken ({commit}, token) {
      commit('setToken', token)
    },
    setShopStatus ({commit}, shopStatus) {
      commit('setShopStatus', shopStatus)
    },
  }

Ejemplos de tienda 2.3

2.4 en la página (archivo) .vue los datos almacenados en el almacén

 this.$store.dispatch('user/setUsername', res.username)
 
 this.$store.dispatch('cart/setAccountItem', accountItem)

2.5 (archivo) .vue los datos leídos de la tienda en la página

 computed: {
      // 个人账户
      userName() {
        return this.$store.state.user.username
      }
  }

resumen

tienda nuxt y vue acceso desde tres lugares diferentes
. 1 marco vue es un estado objetivo, marco nuxt es una función del estado
del marco 2 directorio de archivo de almacén y el directorio de la estructura vue nuxt en la memoria de cuadros es diferente
    marco de vue es una carpeta de almacenamiento de archivos bajo index.js Js relacionada con la introducción, crear instancias de Vuex.Store
    archivo de marco nuxt Js directamente en el directorio de almacenamiento. No es necesario crear una instancia de
marco vue de 3 vías para almacenarlas marco nuxt de datos para almacenar los datos almacenados no es el mismo
    marco vue de escritura directa en nombre de la función que
    se necesita marco nuxt es un método que se afirma Js archivo