状态管理-vuex

Posted 2022-05-26 xy-ouyang

1、使用vuex

// 使用vuex
// 第一步：装包npm i vuex -S

// 第二步：
import Vuex from ‘vuex‘
Vue.use(Vuex)

// 第三步：
const store = new Vuex.Store(
    state: 
        count: 0
    ,
    mutations: 
        incr (state) 
            state.count++
        ,
        sub (state, i) 
            state.count -= i;
        
    
)

var vm = new Vue(
    el: ‘#app‘,
    // render：将App组件渲染到el指定的div#app中（div#app中其他内容被覆盖）
    render: c => c(App),
    router,
    store // 第四步，挂载到vm
);

 

2、使用【$store.state.变量】获取vuex的数据；使用mutations来操作state中的数据【this.$store.commit(‘方法名‘, 参数)】

<template>
<div>
    <h1>counter组件</h1>
    <!-- 以前 -->
    <!-- <input type="text" v-model="count"/> 
    <input type="button" value="加1" @click="increment"/>
    <input type="button" value="减2" @click="subtract"/>
    -->

    <!-- 使用vuex后 -->
    <input type="text" v-model="$store.state.count"/>
    <input type="button" value="加1" @click="increment"/>
    <input type="button" value="减1" @click="subtract"/>

    <h2> count = $store.state.count </h2>
</div>
</template>

<script>
export default 
    // 以前count变量来自本组件data区，现在从vuex中取值
    /*data() 
        return 
            //count: 1
        
    ,
    methods: 
        increment() 
            this.count++;
        ,
        subtract() 
            this.count--;
        
        
    */

    // 使用vuex后
    methods: 
        increment() 
            this.$store.commit(‘incr‘);
        ,
        subtract() 
            // 第二参数：给sub方法传参；注意，只能传一个参数。
            this.$store.commit(‘sub‘, 2);
        
    


</script>

<style></style>

 

3、使用getters包装数据并总结vuex的使用方式