Vue之Vuex的学习

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式，Vuex解决了组件之间同一状态的共享问题，简单的理解就是你在state中定义了一个数据之后，你可以再所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更

安装、使用 vuex

npm install vuex --save

在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹中新建一个index.js，里面的内容如下：

import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
const store = new Vuex.store()

export default store

在 main.js 里面引入 store ，然后再全局注入一下，这样一来就可以在任何一个组件里面使用 this.$store 了：

import store from ‘./store’ // 引入store

new Vue({
el:’#app’,
router,
store,
template:’’,
components: {App}
})

回到store文件的index.js文件中，我们先声明一个state变量，并赋值一个空对象给它，里面随便定义两个初始属性值；然后再在实例化的 Vuex.store 里面传入一个空对象，并把刚声明的变量state扔里面：

import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
const state = { // 要设置的全局访问的state对象
showFooter: true,
changeableNum: 0 // 要设置的初始属性值
}
const store = new Vuex.store()

export default store