Vuex之store的使用

如果我们需要在不同路由中使用同一个会改变的参数，也就是需要一个全局参数，我们可以通过Vuex的store来实现。

实现方法：

1.在package.json中加入vuex，因为store是Vuex的一个功能。然后执行npm install。

"dependencies": {
  "element-ui": "^2.15.1",
  "less": "^4.1.1",
  "less-loader": "^8.1.1",
  "vue": "^2.5.2",
  "vue-router": "^3.0.1",
  "vuex": "3.3.0"
}

2.在main.js导入store，并加入到Vue实例中。

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

3.在src文件夹下新增store文件夹，里面包含index.js和modules/userId.js，modules文件夹下的文件为变量名。

4.编辑userId.js代码如下，即定义一个全局状态userId，定义其get和set方法。

其中，mutations是改变的意思，即改变状态的值。

export default {
    state: {
        userId:{}
    },
    getters: {
        getUserId: state => state.userId
    },
    mutations: {
        setUserId(state, userId){
            state.userId = userId
        }
    }
}

5.编辑index.js代码如下，即引入并使用Vuex，引入userId并在modules中配置。

import Vue from 'vue'
import Vuex from 'vuex'
import userId from './modules/userId'

Vue.use(Vuex)

export default new Vuex.Store({

    state: {
        //这里放全局参数
    },

    mutations: {
        //这里是set方法
    },

    getters: {        
        //这里是get方法   
    },

    actions: {
      
    },

    modules: {
        userId,
        //这里是为了给全局变量分组，所以需要写提前声明其他store文件，然后引入这里
    }
})

6.然后我们就可以在需要的地方存取变量了。

存变量的方法为

this.$store.commit('setUserId', 'luoyihao')

取变量的方法为

this.$store.getters.getUserId

7.我们也可以在新建Store（仓库）时，将state、getters、actions、mutations等文件分别单独写成js，在store/index.js中引用。

如下图所示。

//state.js
let state = {
  count: 1
}
export default state

//mutation.js
// 第一个参数默认接收state对象
let increment = (state) => {
  state.count++
}
let decrement = (state) => {
  state.count--
}
export {increment, decrement}

ps:Vuex和localStorage、全局变量的区别：

Vuex和localStorage的区别是什么呢？

1.最重要的区别：vuex存储在内存，localStorage则以文件的方式存储在本地

2.应用场景：vuex用于组件之间的传值，localStorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面时vuex存储的值会丢失，localStorage不会。

 

Vuex和全局变量的区别是什么呢？

1.由于使用Vuex需要将store实例挂载到Vue实例中，因此Vue实例可以对Vuex的state数据加监听，这跟Vue实例data的数据双向绑定是类似的。

而全局变量由于没有被“数据劫持”，因此即使全局变量的值发生改变，也无法在Vue实例中监听到他的变化。

2.Vuex中的状态值，不能通过赋值的方式(state.xxx = yyy)改变，需要通过mutation触发变更。这样做方便状态管理，而一般的全局变量是支持直接赋值的。