vuex中的核心特性

vuex核心概念state 存储数据getters 获取数据的方式mutations 修改数据的方式actions 通过后台更改操作异步数据的方式

1.1.1State

vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面中在计算属性computed里通过 this.$store.state来获取我们定义的数据；

1.1.2Mutation

mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。

1.1.3Action

由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

Actions中的方法有两个默认参数

• context 上下文(相当于箭头函数中的this)对象

• payload 挂载参数。

1.1.4Getter

可以对state中的成员加工后传递给外界

Getters中的方法有两个默认参数

• state 当前VueX对象中的状态对象

• getters 当前getters对象，用于将getters下的其他getter拿来用

1.1.5Module

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

1.2Vuex案例在html文件中使用

1.2.1初始化案例State

state 存储数据，vuex中的数据源。

1.2.2数据计算处理getters

getters 这个是获取仓库里的数据。同时，我们需要对获取到的数据，进行进一步的计算。这时，我们就需要在getters中添加 各个方法。（因我们 要操作数据，所以，我们写方法，写方法的目的，就是做事情。）

通过 计算 改 state中的数据的状态

(计算---你去做事情，你做的事情，写在哪里？写在方法里，或者 我们说 写在函数里)

(使用getters，它就有逻辑了，它就能思考了。)

<div id="app">
     
        <good-list></good-list>
        <good-totalprice></good-totalprice>
    </div>
   
    <template id="goodTotalprice">
        <div>
            goodTotalprice组件
            
            <h1>商品合计总价:{{totalprice}}</h1>
        </div>
    </template>
   
    <template id="goodList">
        <div>
            goodList组件
           <table width="800" align="center" border="1">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>商品价格汇总</th>
                <th>操作</th>
            </tr>
            <tbody>
                <tr v-for="item in list">
                    <th>{{item.id}}</th>
                    <th>{{item.goodname}}</th>
                    <th>{{item.price}}</th>
                    <th>{{item.num}}</th>
                    <th>
                        {{item.total}}
                    </th>
                    <th>
                        <button @click="del(item.id)">删除</button>
                    </th>
                </tr>
            </tbody>
           </table>
        </div>

    </template>

<script>

Vue.use(Vuex)
let mystore=new Vuex.Store({
    //存数据
    state:{
        totalPrice:0,
                goods:[
                    {
                        id:1,
                        goodname:'戴尔笔记本',
                        price:3999,
                        num:30,
                        total:0
                    },
                    {
                        id:2,
                        goodname:'惠普打印机',
                        price:1560,
                        num:10,
                        total:0
                    },
                    {
                        id:3,
                        goodname:'戴尔台式电脑',
                        price:4580,
                        num:100,
                        total:0
                    }
                ]
                
    },
    //获取数据的同时，操作数据
    getters:{
        getGoods(state){
            let Goods=state.goods
            Goods.forEach(item=>{
            item.total=item.price * item.num
            })
            return Goods;
        },
        getPrice(state){
            let Total=state.totalPrice;
            let Goods=state.goods
            Goods.forEach((item)=>{
                Total+=item.price * item.num
            
            })
            return Total
            
        }
    }

})
//创建组件，---组件访问数据仓库中的数据
let goodTotalprice={
    template:`#goodTotalpric`,
    data(){
        return{
        
      }
    },
    computed:{
        totalprice(){
            return this.$store.getters.getPrice
        }
    }
},
let goodList={
    template:`#goodList`,
    data(){
        return{
        
        }
    },
    computed:{
        list(){
            return this.$store.getters.getGoods
        }
    },
    methods:{
    
    }
}
 var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){
               
                return{
                   
                }

            },
            store:mystore,
            methods:{
               

            },
            components: {
                goodTotalprice,goodList
            }
        })
</script>

预览：

 

vuex-----使用getters计算每一件商品的总价

获取商品并计算每件商品的总价             -------  组件里面computed，取商品，取getters里面的商品

vuex-----使用getters计算所有商品总价  -------  组件里面computed，取总价，取getters里面的总价

1.2.3修改数据的方式mutation

修改数据的方式mutation

在当前组件的方法中心methods的方法里, 调用 数据仓库this.$store.commit() 方法， 传值给vuex的mutations，然后 通过 mutations 里的一系列操作 ，去 改变state中的数据。

commit同步操作

this.$store.commit():同步操作，写法：

this.$store.commit('mutations里的方法名',值)

 .commit传值给vuex的mutations改变state 将del方里的id传值给mutations去用然后改变state

白话理解：  组件点击一下， 动了  2个方法   组件中方法中心的del(id){}  ; vuex数据仓库中mutations里 del(state,id){}

<div id="app">
        <good-list></good-list>
        <good-totalprice></good-totalprice>
    </div>
   
    <template id="goodTotalprice">
        <div>
            goodTotalprice组件
            <!-- <h1>{{totalprice}}</h1>  -->
            <h1>商品合计总价:{{totalprice}}</h1>
        </div>
    </template>
   
    <template id="goodList">
        <div>
            goodList组件
           <table width="800" align="center" border="1">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>商品价格汇总</th>
                <th>操作</th>
            </tr>
            <tbody>
                <tr v-for="item in list">
                    <th>{{item.id}}</th>
                    <th>{{item.goodname}}</th>
                    <th>{{item.price}}</th>
                    <th>{{item.num}}</th>
                    <th>
                        {{item.total}}
                    </th>
                    <th>
                        <button @click="del(item.id)">删除</button>
                    </th>
                </tr>
            </tbody>
           </table>
        </div>

    </template>

//创建数据仓库 
 //(1)使用
  Vue.use(Vuex)
 //(2)
let mystore=new Vuex.Store({
//修改数据
mutations:{
del(state,id){
    console.log('接收到的数据是：'+id);
    //找到这一条数据删除
    let Goods=state.goods;
    let k;
    Goods.forEach((item,index)=>{
        if(item.id==id){
            k=index;
        }
    })
    //删数据
    Goods.splice(k,1)

}


}
})

let goodList={
    tenplate:`#goodList`,
    data(){
        return{
        
        }
    },
   methods:{
       del(id){
           console.log(id);
           //调用执行数据仓库mutations里的del方法
           this.$store.commit('del',id)
       }
   }
}

预览：