1.  src新建一个vuex文件夹
2. vuex文件夹里新建一个store.js
3. 安装vuex cnpm install vuex --save
4.  在刚才创建的store.js 中引入vue、vuex 引入vue

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

5 定义数据 state在vuex中用于存储数据

var state = {  count:1,}

6定义方法 mutations里边放的是方法,方法主要用于改变state里边的数据

var mutations = {
    incCount(){
            ++state.count;
   }
}
   //类似于计算属性  state里边的数据改变时候触发的方法。 可以做一些操作 并且可以有返回值
var getterfl={
         completedCountChange(state){
         return state.count * 2 +'位';
        }
    }

Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作

var actionfl = {
  asynIncCount(context){  
//因此你可以调用context.commit来提交一个mutation  使用action需要用dispatch
      context.commit('incCount');
  }
}

7. 实例化 vuex

const store = new Vuex.Store({
            state,//state: state  简写
            mutations: mutations,//属性的简写是 mutations
    getters:getterfl,
       actions:actionfl,
})

8 对外暴露

export default  store;

9 在需要用的地方引入

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

10 注册store ，放在methods,data同级

export default {
    data(){
        return{}
    },
    store:store,
    methods:{
        incCount(){
            this.$store.commit('incCount');
        }
    }
}

11 使用vuex
使用数据： this.\$store.state.count
调用方法： this.$store.commit('incCount');

完成！！！！

 

适用场景：

父子组件、兄弟组件、无关系组件任意组件之间的传值

.品鉴：

Vuex本质上也是一种本地存储，比localStorage的单纯值传递多了方法、属性、异步方法等功能。但是因为是将内容本地化，所以就会被在浏览器中获取到。