Vuex的使用

202 阅读1分钟

1. 下载vuex npm install vuex --save

2. 在src下新建store文件夹,src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);      //引用Vuex

let state = {       //声明变量state,用来存储状态值
    count:1,
    makserShow:false,
    token:sessionStorage.getItem('token')
};

let mutations = {       //运用mutations存储变量相关的方法
    incCount(){
        ++state.count
    }
};

const store = new Vuex.Store({      //实例化Vuex,挂载state、mutations
    state,
    mutations:mutations
});
export default store;       //导出

3.在main.js中引入

//引入Vuex
import store from './store/index'

new Vue({
    render: h => h(App),
    store,      //将store挂载到new Vue 实例中
}).$mount('#app');

4.在组件内使用

1. $store.state.makserShow     //在HTML内使用
2. this.$store.state.maskerShow    //在方法内使用,this根据具体指向
3. 在其他js文件内使用
    import store from '../src/store/index'
    store.state.makserShow = true;