vuex的简单使用心得

vue脚手架使用vuex是要安装，我是直接修改的package.json,然后npm install安装的

"dependencies": {
    "axios": "^0.26.0",
    "core-js": "^3.6.5",
    "element-ui": "^2.13.0",
    "vue": "^2.6.11",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.2.0",
    "vuex": "^3.6.2"
  },

使用，新建store文件夹，新建index.js

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const state={
    islogin:0,
    nickname:0,
    
}
const mutations={
    isloginFunc(state,info){
        state.islogin = info
    },
 nicknameFunc(state,info){
        state.nickanme= info
    }

}
const actions={
    saveIslogin({ commit },data){
        commit('isloginFunc',data)
    },
saveNickname({ commit },data){
        commit('nicknameFunc',data)
    }
}
const getters={

}
export  default new Vuex.Store({
    state,
    mutations,
    actions,
    getters


})

挂载到vue里，mian.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from "./store";

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

vue组件如何使用

 console.log("----------------------------------")
        console.log(this.$store.state.islogin);//获取


        this.$store.dispatch('saveIslogin',1)//修改状态
        console.log(this.$store.state.islogin);

页面获取

{{$store.state.islogin}}

注意事项：

1.单页面应用，如果跳转新窗口打开页面，vuex里面的值会被清空；

2.vuex的值并不会被永久保存，只要重新访问项目就被被清空，不等同于localstorage；