Vue系列入门教程(14)-vuex入门案例

Web前端 潘老师 1年前 (2020-09-12) 1094 ℃ (0) 扫码查看

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

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

npm install vuex --save

Vue系列入门教程(14)-vuex入门案例

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、运行测试:
Vue系列入门教程(14)-vuex入门案例


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:Vue系列入门教程(14)-vuex入门案例
喜欢 (9)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!