原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
如何在Vue项目中使用vuex
目录在Vue项目中使用vuex一、安装vuex二、创建store三、挂载store四、在组件中使用五、在Vue组件中监听Vuex总结
在Vue项目中使用vuex
在一个vue项目中使用vuex，需要根据项目来源分两种情况：
第一种情况：在老项目中使用。先额外安装vuex包，然后在配置。第二种情况：在新项目中使用。在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的）。
具体如下图示：
这里我们主要说明第一种情况，在一个老项目中如何使用vuex，步骤如下：
1.首先安装vuex包，安装完之后开始配置
2.在src目录下创建一个文件夹store，在store文件夹中新建一个index.js文件
3.创建Vuex.store实例：index.js中进行如下配置：
4.向Vue实例注入store：main.js中进行如下配置：
5.配置完后就可以在任意组件中使用了
在任意组件中，通过this.$store.state来获取公共数据，在模板中，则可以省略this而直接写成：{{$store.state.属性名}}
一、安装vuex
npminstallvuex--save
二、创建store
在项目src目录下创建store目录，在store目录中创建index.js文件。
写入一下内容：
importVuefromvue
importVuexfromvuex
//挂在Vuex
Vue.use(Vuex)
//创建Vuex对象
conststore=newVuex.Store({
state:{
//存放的键值对就是所要管理的状态
//以key：value为例
key:value,
mutations:{
setKey(state,payload){
state.key=payload;
exportdefaultstore
三、挂载store
在main.js中，添加代码：
importstorefrom./store
newVue({
el:#app,
router,
store:store,//store:store和router一样，将我们创建的Vuex实例挂载到这个vue实例中
components:{App},
template:App/
})
四、在组件中使用
将需要使用的值写在computed中：
computed：{
??key(){
????returnthis.$store.state.key;
??}
}
如果在组件中使用v-model绑定computed中的值，需要在computed中定义set方法，如下：
computed:{
??key:{
????get(){
??????returnthis.$store.state.key;
????},
????set(val){
??????this.$mit(setKey,val);
????}
??}
}
五、在Vue组件中监听Vuex
在Vue组件中监听Vuex：
通过computed获取vuex中的状态值。通过watch监听值的改变。
computed:{
??key(){
????returnthis.$store.state.key;
??}
watch:{
??key(val){
????//要做的操作
??}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
文档评论（0）