程序员培训模板

简单使用Vuex步骤及注意事项

发表时间:2018-11-01 00:00

使用Vuex的步骤:

(1)安装:

  1.使用npm安装:

    npm install vuex --save

  2.使用script标签引入

    <script src="/path/to/vue.js"></script>

    <script src="/path/to/vuex.js"></script>

  如果使用靠前种方式安装Vuex插件,在使用Vuex插件之前需要在main.js入口文件中

    1‘ 使用import方式引入Vuex

      import Vuex from ‘vuex’

2‘ 使用Vue的插件引入函数Vue.use()使用Vuex

Vue.use(Vuex);

(2)安装之后可以通过Vuex实例对象的Store方法创建一个store对象

var store =newVuex.Store({    state:{NewMsg:{Msgs:[{                    title:'暂无消息',                    content:'暂无消息!',                    url:'#no_msg',                    id:'no_msg'}]},},    mutations:{        modifyMsg (state,Obj){if(state.NewMsg.Msgs[0].id ==='no_msg'){                state.NewMsg.Msgs.shift();}var obj ={                title:Obj.title,                content:Obj.content            };            obj.id ='Msg_'+Obj.id;            obj.url ='#'+ obj.id;            state.NewMsg.Msgs.push(obj);}},    actions:{        fetchMsg (context){            $.ajax({                    url:'PHP/GetMsgs.php',                    type:'GET',                    data:{},                    dataType:'json',                    success:function(response){if(typeof response ==='string'){                            response = JSON.parse(response);}                        console.log(response);                        $(response).each(function(k,v){// console.log(v.id+v.title+v.content);                            context.commit('modifyMsg',v);});}});}}});

 

(3)在Vue实例中注册store对象:
```new Vue({
el: '#app',
router,
store,
created (){
store.dispatch('fetchMsg');
},
template: '<App/>',
components: { App }
})

```(4)在组件中使用state数据:  必须通过computed属性使用state数据!否则state属性中的数据发生更改时不会反映在组件上!

  

exportdefault{        computed:{Msgs(){varMsgs=this.$store.state.NewMsg.Msgs;returnMsgs;}}}
注意事项:   <pre>基本组成:    注意到这个store对象包含三个子对象:      state、mutations、actions    其中state用于存储数据,类似vue实例的data属性。    mutations用于递交更改,对state对象中的属性数据进行更改。    actions用于进行递交异步更改,通过调用mutations实现对数据的更改。  actions与mutations的区别:    其中actions区别于mutations的地方在于mutations只能进行同步更改,而actions中的更改可以是异步执行。所以基本上所有用户执行的直接数据更改都是触发mutations属性    函数执行,而需要与后端进行数据交互的数据更改通常是通过actions属性函数去执行。  定义actions与mutations属性函数的注意事项:    其中定义mutations属性函数时必须传递的靠前个参数是state,因为要对state进行更改,第二个参数代表传入的新参数。mutations属性函数只接受两个参数,如果要同时更    改多个属性值,可以通过对象传入。     在actions属性函数中可以通过context.commit()方法触发mutations属性函数。定义actions属性函数时,必须传递的靠前个参数是context,用于触发mutations函数。  触发actions与mutations属性函数的方法:    在子组件中通过this.$store.commit()方法触发mutations属性函数。在注册store的Vue实例中(第三步中将会讲到)可以通过store.commit()触发。    commit函数靠前个参数是mutations的属性函数名,第二个参数是传入的新值。    actions属性函数中可以进行异步操作,比如通过ajax或者Vue.Resource()进行数据获取,获取数据后再通过context.commit()触发更改。     触发actions属性函数使用this.$store.dispatch()或者store.dispatch()(在注册store的Vue实例中)函数。dispatch函数传递的一个参数是actions属性函数名称。如果希望在    Vue实例创建完成还未挂载时就从后端获取数据,则可以在created钩子函数中调用actions属性函数。  在组件中访问数据中心state的注意事项:    在Vue实例中可以通过this.$store.state对象获取state中的数据。如果希望在state中的数据发生更改之后,组件会自动更新,则应该使用组件的computed属性定义数据,而    不是通过data属性定义。如果使用data定义组件数据,则state中的数据发生更改之后组件不会发生变化。</pre>复制代码

export default {
computed: {
Msgs (){
var Msgs = this.$store.state.NewMsg.Msgs;
return Msgs;



分享到:
首页            热门课程             职业路径             实战课程             文章问答