vuex使用简介vuex4.x对应vue3.x

veux4.x 对应vue3.x。直说使用，不说原理，原理官网上有。

vuex安装

只介绍npm安装，其它参考官网。
安装组建，在项目根目录执行

npm install vuex --save

添加到项目，执行前最后提交一下git

vue add vuex

store创建

使用vue add vuex添加到项目后，会在src下创建store/index.js文件并在main.js中使用，在index中的配置为

import {createStore} from 'vuex'

export default createStore({
    state: {
        // 设置属性
        loginPageFlag: false
    },
    mutations: {
        // 监听状态
        setLoginPageFlag(state, val) {
            state.loginPageFlag = val
            console.log('mutations ', state.loginPageFlag);
        }
    },
    getters: {
        // 回去不同状态的变量，返回前可做处理
        getLoginPageFlag(state) {
            return state.loginPageFlag
        }
    },
    actions: {
        // 监听状态，直接盗用mutation
        setLoginPageFlag(state, val) {
            state.commit('setLoginPageFlag', val)
        }
    },
    modules: {}
})

在main.js使用

main.js中不能使用this调用变量，需要使用引入的对象使用

import store from './store'
store.dispatch('setLoginPageFlag', true)
localStorage.setItem('nickName', '登 录')

在组件中使用

export default {
  name: 'App',
  data() {
    return {
      loginPageFlag: this.$store.state.loginPageFlag,
    }
  },
  computed: {
    getLoginPageFlag(){
      // 计算每次只的改变
      return this.$store.state.loginPageFlag
    }
  },
  watch: {
    getLoginPageFlag(val) {
     // 接口每次获取值
      this.loginPageFlag = val;
    },
    loginPageFlag(val) {
      // 监控状态改变
      this.$store.dispatch('setLoginPageFlag', val)
    }
  }
}