Vue系列入门教程（14）-vuex入门案例

1、我们使用vue-cli创建一个名为vuex-app的vue项目

2、安装vuex方式有很多，我们这里基于vue-cli，使用npm安装，安装指令如下：

npm install vuex --save

1、在src目录下新建store目录，在store下新建index.js，代码如下：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)

//创建Vuex对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态，类似于vue实例中的data
        name:'hello vuex'
    }
})
// 默认导出store
export default store

[v_blue]提示：
1、每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2）你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用[/v_blue]

2、将store挂载到当前项目的Vue实例当中去，修改main.js如下：

import Vue from 'vue'
import App from './App.vue'
// 导入store
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
	// store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
	store
}).$mount('#app')

3、在组件中使用Vuex，这里我们在components中新建StoreDemo.vue中使用，代码如下：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

[v_blue]提示：因为我们在vue实例中挂载了store，所以我们可以在任何组件中都可以使用$store，但是我们不能在此直接改变state，后面会讲如何去改变state[/v_blue]
4、修改App.vue如下：

5、运行测试：