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

一、安装

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

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

npm install vuex --save

二、开始使用

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

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

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

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

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中使用，代码如下：

<template>
    <div>
        <!-- 1、在模板中获取store中的状态 -->
        <h1>{{$store.state.name}}</h1>
        <!-- 2、在方法中获取store中的状态 -->
        <button @click="handleClick">获取</button>
        <!-- 3、使用计算属性获取 -->
        <h2>{{name}}</h2>
    </div>
</template>

<script>
    export default {
        methods:{
            handleClick(){
                // 在方法中获取要通过store，不能在此直接改变state，后面会讲
                alert(this.$store.state.name);
            }
        },
        // 使用计算属性获取
        computed:{
            name(){
                return this.$store.state.name;
            }
        }
    }
</script>

<style scoped>

</style>

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

4、修改App.vue如下：

<template>
  <div id="app">
        <StoreDemo></StoreDemo>
  </div>
</template>

<script>
import StoreDemo from './components/StoreDemo.vue'
export default {
  name: 'app',
  components: {
        StoreDemo
  }
}
</script>

<style>
</style>

5、运行测试：