2、vuex状态管理--input新增内容

<template>
    <div class="myorder">
        <h3>2、新增内容</h3>       
        <ul>
            <li v-for="(item,index) in collects" :key="index">{{item}}</li>
        </ul>
        <input type="text" v-model="newVal" placeholder="输入新值" class="add_val"/>
        <button class="add_btn" @click="pushCollects(newVal)">增加</button>
    </div>
</template>
<script>
import { mapState,mapMutations} from 'vuex'
export default{
    computed:{
        ...mapState({
            collects:state => state.orderStatus.collects
        }),
         newVal: {
            get () {
                return this.$store.state.orderStatus.newVal;
            },
            set (Val) {
               this.$store.commit('setVal',Val) //需要设置新增内容，否则无法改变newVal的状态值
            }
        },
    
    },
    methods:{
        ...mapMutations(['pushCollects'])
    },
}
</script>

vuex状态管理--orderStatus.js模块 存放路径：store/modules/orderStatus.js

const state={
    collects:['黄金糕','狮子头','螺蛳粉','双皮奶','蚵仔煎'],  //初始化一个colects数组    
    newVal:''
};
const getters={
};
const mutations={
     pushCollects(state,items){ //如何变化collects,插入items
        state.collects.push(items);       
     },
     setVal(state,inputVal){
       state.newVal= inputVal
     }
 };
const actions={
};
export default {
     state,
     getters,
     mutations,
     actions
}

这是store 文件夹下的index.js

用modules写法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import orderStatus from './modules/orderStatus'


export default new Vuex.Store({
    modules:{
        orderStatus
    }
})

css样式

.add_val{
    padding:5px 10px;
    background:#fff;
    border:none;
}
.add_btn{
    background:#ffa70e;
    color:#333;
    border:none;
    padding:5px 10px;
    border-radius:4px;
}