1.vuex学习笔记——store的使用

新建一个store的js
在这里插入图片描述
引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
import VueCookies from 'vue-cookies'

Vue.use(Vuex)

定义需要使用的属性

let setLang = () => {
  if (VueCookies.isKey('lang')) {
    console.log('cookie' + VueCookies.get('lang'))
    return VueCookies.get('lang')
  } else {
    return 'en-US'
  }
}

const lang = setLang()
const token = ''
const state = {
  token: token,
  lang: lang
}

这里我为了保存网页中用户选择语言之后,防止F5刷新,又被重置了语言,所以使用了cookie

定义mutations和actions

const mutations = {
  setLang (state, lang) {
    state.lang = lang || 'en-US'
  },
  setToken (state, token) {
    state.token = token || ''
  }
}

const actions = {
  setLang (context, param) {
    context.commit('setlang', param)
  },
  setToken (context, param) {
    context.commit('setToken', param)
  }
}

定义store

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

最后

export default store

如何在组件中更新token和lang?

1.引入vuex的mapActions, mapState

import {mapActions, mapState} from 'vuex'

2.computed

computed: {
    ...mapState([
      'lang',
      ‘token’
    ])
  },

3.html中渲染lang


      
        
English
简体中文

4…methods中

changeLang (lang) {
      this.$cookies.set('lang', lang)
      this.$i18n.locale = lang
      this.$store.commit('setLang', lang)
    }

你可能感兴趣的:(vuex)