vuex环境搭建及小案例

1、在项目下安装vuex：npm install vuex --save-dev

2、在main.js中注册vuex：

import Vuex from 'vuex'            //注册vuex
import store from './vuex/store'   //某一值的初始状态及改变方法

new Vue({
  el: '#app',
  router,
  store,                            //添加该项store
  components: { App },
  template: '<App/>'
})

3、搭建store.js

store.js的内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        age: '0' //存储了一个公共状态age
    },
    mutations : {
        showAge(state, msg){
            state.age= msg;
        }
    }
}) 
export default store

4、使用小案例

home.vue （组件1）

<template>
    <div class="components1">
        <div>
            <input type="text" v-model="msg" />
            <input type="button" v-on:click="setName" value="设置" />
        </div>
    </div>
</template>

<script>
    export default {
        name: 'components1',
        data(){
            return {
                msg : ''
            }
        },
        methods : {
            setName(){
                this.$store.commit( 'showAge', this.msg ); //在组件1中修改组件3的状态
            }
        }
    }
</script>

home1.vue（组件2）

<template>
    <div>
        <h3>看这里，我在变化：{{myAge}}</h3>
    </div>
</template>
<script>
    export default {
        name : "components3",
        computed : {
 //一般会在组件的计算属性（computed）获取state的数据
//（因为，计算属性会监控数据变化，一旦发生改变就会响应）
            myAge (){
                return this.$store.state.age;
            }
        }
    }
</script>

app.vue

<template>
  <div id="app">
  	<p>在输入框里面输入值，后面的数据也会变化</p>
  	<home></home>
 //在组件2中渲染出组件1的值，并且在改变state中的age时，组件2中的组件1也会更新。
    <home1></home1>
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
import home from './components/home';
import home1 from './components/home1';
export default {
  name: 'app',
  components : {
    home,
    home1
  }
}	
</script>

5、效果图

vuex环境搭建及小案例

猜你喜欢