Store write and read status

1 vue store the write and read

Create a folder store 1.1
1.2 write js file

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 Examples of the store

introduced in the corresponding file in the store The 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 on the page (.vue file) stores the data in store

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

1.5 (.vue file) the data read out from the store in the page

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

Store in the writing and reading frame 2 nuxt

Create a folder store 2.1
2.2 write js file

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)
    },
  }

Examples of store 2.3

2.4 in the page (.vue file) the data stored in the store

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

2.5 (.vue file) the data read out from the store in the page

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

to sum up

nuxt store and access vue from three different places
. 1 vue frame is a target state, nuxt frame is a function of the state
store file directory and directory structure vue nuxt frame 2 in the frame store is different
    vue frame is a store folder under index.js .js file related to the introduction, instantiating Vuex.Store
    nuxt frame .js file directly in the store directory. Do not need to instantiate
way 3 vue framework to store and save data nuxt framework to store the data stored is not the same
    vue framework of direct write function name on it
    nuxt framework is needed is a method which stated .js file