Vuex初级入门及简单案例

1.为什么要使用Vuex？

（1）方便所有组件共享信息，方便不同组件共享信息。

（2）某个组件需要修改状态和需求。

 

2.状态有哪些？

（1）组件内部定义的data状态（通过组件内部修改）

（2）组件外部来的props（通过组件外部修改）

（3）Vuex里的state（组件内部和外部都可以修改）

 

3.安装Vuex

方法一：官网的安装处有网址，点开存储为成文件，引入你要写的项目就可以。  此方法需要在项目中用script引入。

方法二：npm install vuex --save

        yarn add vuex

 

4.引入

Vue.use(Vuex)

const vm =new Vue({

     el:"root"

})

 

在浏览器中输入window.Vuex有打印的，表示引入成功。

 

5.Vuex的流程图

组件根据state状态渲染，多个组件可以共享state。不能再组件内部直接修改状态。

State状态的修改必需通过Mutations，Mutations里面存的是函数。

Actions通过Commit操作来调用异步数据，如果你的项目里没有调用异步数据的需求，你可以直接从组件调用Mutations。

Actions里面也是函数，通过Dispatch触发。

Mutatins可以跟踪所有的修改，保存修改的过程。意义是做时间穿梭，记录历史。而Actions没有此功能。

 

5.使用

Vue.use(Vuex)

 

var store  = new Vuex.Store({              //全局定义store

    state:{

         count：0

 

    },

    actions:{

 

    },

    mutations:{           

         increment（state，）{               //写一个函数，用来修改状态，需要调用一下。

                 state.count++                //是响应式的，可以直接修改值。

         }

    }

})

 

cosnt AddButton = {

     template:"<button> {{count}}</button>'    //如果没有在自定义属性赋值，则在模板中写{{$store.state.count}}

 }

 

const vm =new Vue({

     el:"root", 

     store        //把定义好的store注入到组件中。此时你在浏览器后台就可以通过写window.store来查看了

 

     components:{

       AddButton

     }，

      computed：{

          count(){

                 return $store.state.count              //通过计算属性把state里的值保存在count里，再调用就会很方便。

           }

     },

      methods:{

           increment(){

                this.$store.commit("increment")

           }

      }

})

 

<div id="root"> 

     {{$store.state.count}}            //此时在页面中就可以读到0了

    <att-button ><add-button>

</div>

<button @click="increment"></button>

时间旅行：每次通过mutations 改变值都会在浏览器的vue中记录下来，点击那个小圆圈。