VUEX

VUEX就是解决组件之间同一状态的共享问题，就是解决不同组件不同页面之间的数据共享，这两个组件或者页面是完全没有关系的；在小项目中尽量不要使用vuex，小项目可以使用localstorage和sessionstorage

为什么不能用通知：
通知适用于有关系的组件；如下图；在跟组件中引入A和B，那么在A和B之间，甚至A1和B2，A2和B之间都能使用通知，因为他们溯源到最后是和根组件有关系。有点像远方亲戚的感觉，他们之间可以使用通知

image.png

但是在项目中可能存在完全没有关系的组件，如下图，两个组件是用路由的方式动态加载的，页面加载了A路由就不会出现B，加载了B就不会出现A，这两个组件之间共享数据就需要使用VUEX，当然也可以使用html的本地缓存。但是缓存是有大小限制的，大型项目可能没有办法做到，也不够方便

101535598263_.pic_hd.jpg

使用：
1、src目录下面新建一个vuex的文件夹
2、vuex 文件夹里面新建一个store.js
3、安装vuex

cnpm install vuex --save

4、在刚才创建的store.js引入vue 引入vuex 并且use vuex

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

5、定义数据

/*1.state在vuex中用于存储数据*/
var state={
   count:1
}

6、定义方法 mutations里面放的是方法，方法主要用于改变state里面的数据

var mutations={
     incCount(){
          ++state.count;
      }
}

暴露

const store = new Vuex.Store({
     state,
     mutations
})
export default store;

完整的store.js：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 1. state 在vuex中用于存储数据
var state = {
    count:1
}
// 2. mutations放的是方法，主要用于改变state里的数据
var mutations = {
    incCount(){
        ++state.count;
    }
}
//state  ===> state:state
var store =  new Vuex.Store({
    state,
    mutations
});
export default store;

组建里面使用vuex：
1.引入 store

 import store from '../vuex/store.js';

2、注册

export default{
    data(){
         return {               
            msg:'我是一个home组件',
            value1: null,
         }
    },
    store,//注册引入的store
    methods:{
         incCount(){
            this.$store.commit('incCount'); /*触发incCount方法*/
         }

    }
}

3、获取state里面的数据

this.$store.state.数据

4、触发 mutations中incCount方法 改变 state里面的数据

this.$store.commit('incCount');