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

最新推荐文章于 2022-09-22 21:02:18 发布

yecengxiangshi0426

最新推荐文章于 2022-09-22 21:02:18 发布

阅读量191

点赞数 1

分类专栏： vue 文章标签： Vue Vuex

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用Vuex的步骤：

（1）安装：

　　1.使用npm安装：

1	`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

1	`import` `Vuex from ‘vuex’`

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

1	`Vue.use(Vuex);`

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

复制代码

var store = new Vuex.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属性中的数据发生更改时不会反映在组件上！

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

注意事项：　

　　基本组成：

　　　　注意到这个store对象包含三个子对象：

　　　　　　state、mutations、actions

　　　　其中state用于存储数据，类似vue实例的data属性。

　　　　mutations用于递交更改，对state对象中的属性数据进行更改。

　　　　actions用于进行递交异步更改，通过调用mutations实现对数据的更改。

　　actions与mutations的区别：

　　　　其中actions区别于mutations的地方在于mutations只能进行同步更改，而actions中的更改可以是异步执行。所以基本上所有用户执行的直接数据更改都是触发mutations属性

　　　　函数执行，而需要与后端进行数据交互的数据更改通常是通过actions属性函数去执行。

二。简单的使用

new Vue({
el: '#app',
router,
store,//使用store
components: { App },
template: '<App/>'
})

）

//创建Store实例
const store = new Vuex.Store({
// 存储状态值
state: {
count: 1,
flag:true
},
// 状态值的改变方法,操作状态值
// 提交mutations是更改Vuex状态的唯一方法
mutations: {
increment (state) {
state.flag = !state.flag;
// 变更状态
state.count++
}
},
// 在store中定义getters（可以认为是store的计算属性）。Getters接收state作为其第一个函数
getters: {
done(state) {
return state.count + 5;
},
},
actions: {
increment (context) {

context.commit('increment')
},
incrementAsync (context) {

// 延时1秒
setTimeout(() => {

context.commit('increment')
}, 1000)
}

}
})
// 要改变状态值只能通过提交mutations来完成

4.通过$store.state.flag方式来获取或操作自己需要管理的数据

　　定义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中的数据发生更改之后组件不会发生变化。

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