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

<el-dropdown-menu slot="dropdown">
      <el-dropdown-item>
        <div @click="changeLang('en-US')" :class="lang==='en-US'?'acitve':' '">
          <div class="lang-icon">
            <el-icon v-show="lang==='en-US'" class="el-icon-caret-right"></el-icon>
          </div>
          English
        </div>
      </el-dropdown-item>
      <el-dropdown-item>
        <div @click="changeLang('zh-CN')" :class="lang==='zh-CN'?'acitve':' '">
          <div class="lang-icon">
            <el-icon v-show="lang==='zh-CN'" class="el-icon-caret-right"></el-icon>
          </div>
          簡體中文
        </div>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>

4…methods中

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