Vuex全局状态管理的简单用法

 

一、安装

npm install --save vuex
//注意要带save

二、在src新建一个文件夹vuex，然后再新建一个store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) 
const store = new Vuex.Store({
        //全局调用变量
	state: {
		isIphonex:false,
	},    
        //改变全局变量函数
	mutations: {
		changePhone(state,msg) {
			state.isIphonex = msg;
		}
	}
}) 
export default store

三、再main.js中设置store属性，调用全局变量

import Vue from 'vue'
import App from './App'

import Vuex from 'vuex'
Vue.use(Vuex)


import store from './vuex/store'
Vue.prototype.$store = store 

new Vue({
	el: '#app',
	router,
	components: {
		App
	},
	template: '<App/>'
})

四、在页面用调用写定义好的Vuex变量（全局变量）

<template>
  <div>
    
    	<div>是不是iphoneX ===> {{isIphonex}}</div>
    	<button @click="changePhone()">改变Store.isPhonex</button>
  </div>
</template>

<script>

export default {
 	data() {
			return {
				
			}
		},

		components: {
			
		},
		computed: {
			isIphonex() {
				return this.$store.state.isIphonex
			},
		},
		methods: {
			
			changePhone(){
				//直接修改VueX的值
				this.$store.state.isIphonex = true;

				//也可以换一种方法，这样可以跟踪每一个状态的变化
//				this.$store.commit('changePhone', true);
			}
			
		},
}

在computed中设置获取所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

直接this.$store.state.isIphonex    拿到定义的变量

直接显示到页面  <div>是不是iphoneX ===> {{isIphonex}}</div>

在页面中也可以直接改变vuex中定义的变量

两种方法

①//直接修改VueX的值
 this.$store.state.isIphonex = true;

 

②  也可以换一种方法，这样可以跟踪每一个状态的变化 （比较推荐这种）
this.$store.commit('changePhone', true);

用第二中方法 就要在 store.js中的mutations定义改变变量的function

mutations: {
        changePhone(state,msg) {
            state.isIphonex = msg;
        }
  }

 

以上就是vuex简单调用！