vuex的介绍 、使用state与mutation实现不同组件数

Vuex用于大型项目中，不同组件之间（不是兄弟组件）的数据共享、数据持久化。作用与localStorage、sessionStorage相似。小项目中，优先使用后者。

一、安装与定义：

1、安装vuex 

cnpm install vuex --save

2、src目录下面新建一个vuex的文件夹

3、vuex 文件夹里面新建一个store.js

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

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

5、在store.js中定义数据

/*1.state在vuex中用于存储数据*/

var state={

    count:1

}

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

var mutations={

    incCount(){

++state.count;

    }

}

7、暴露

const 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,

methods:{

    incCount(){

this.$store.commit('incCount');  /*触发 state里面的数据*/

    }

}

    }

3、获取state里面的数据 

this.$store.state.数据

4、触发 mutations 改变 state里面的数据，如果有其他组件也使用了该store中的state,那麽其他组件中的state的值 也会跟着改变。

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