1、安装vuex:
npm install vuex --save
2、引入vuex:
在src目录下,新建一个store文件夹,然后里面创建一个index.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
将main.js里的添加代码:
import store from './store/index'
new Vue({
router,
store,
****************************
3、使用vuex:
完成这些,可以在任何组件通过$store.state.***直接调用vuex中的变量,相当于所有页面共享。
4、vuex的各种东西:
state、getter、mutation、action、module。实际使用中,至少要有state和mutaition。
更改vuex的store中的状态唯一的方法就是提交mutation。在store中的index.js中,我们可以定义多个mutation事件,供组件调用。
mutations: {
addOne(state){
state.temp++
},
},
那么在组件中我们可以在事件中直接使用this.$store.commit('addOne')来调用他。
this.$store.commit('addOne');
在vue就可以直接使用
{{this.$store.state.temp}}
来显示。