Vuex使用以及namespaced注意事项

Vuex使用以及namespaced注意事项

Vuex使用
需要某个变量为全局变量时，可以采用Vuex来进行实现，简单案例说明：
1.安装Vuex有的话可省略

npm install --save vuex

2.在src下新建store文件夹且在store文件下新建index.js以及modules/getValues.js

3.在getValues.js设置全局变量的state,代码如下：
注：namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接，能保证变量名重复的情况下不会出错。

export default{
    
    
    namespaced:true,
    state:{
    
    
        globalValue:(3<1)?'全局变量正确':'全局变量错误'
    },
    mutations:{
    
    

    },
    actions:{
    
    

    },
    getters:{
    
    

    }
}

4.在store下的index.js下new Vuex，且引入getVlaues.js文件，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import getGlobalValues from './modules/getValues'
Vue.use(Vuex)
const store = new Vuex.Store({
    
    
    modules:{
    
    
        getGlobalValues
    }
})
export default store

5.组件内使用：
引入store：

import store from '@/store'

使用state下的全局变量：

this.global = store.state.getGlobalValues.globalValue

同理，js里面使用亦是如此