vuex数据共享和操作（类似本地存储）

第一：安装vuex

npm i vuex

第二：创建vuex

1.在src文件夹下创建文件夹store

2.在store文件夹下创建js文件（一般名称为index，可自定义）

3.在index.js文件里创建vuex 代码如下：

import Vue from 'vue   //引入vue
import Vuex from 'vuex'      //引入vuex

Vue.use(Vuex)

const  V = {

    namespaced:true  //必须开启
    state: {},
    mutations: {},
    actions: {}

}

export default new Vuex.Store({
         modules:{  V:V }

})

补充：共享的数据写在state里、修改数据的方法写在actions（actions一般用于ajax请求后处理数据或者特殊的业务逻辑） 和mutations （mutations一般为操作state数据的函数），其中actions通过commit方法对mutations 里的方法调用。

例子 ==》给n的值+vaule[实现n+(1或2或····)]：

const  V = {

    namespaced:true,

    state: {n:0},

    actions: {

                add:function(context,vaule){ context.commit("ADD",vaule)}

},
    mutations: {

                ADD:function(state,vaule){  state.n +=vaule   //实际对n进行操作 }
},

}

export default new Vuex.Store({
         modules:{  V:V }
})

第三：引入并且关联vuex

1.在main.js中 import  Vuex from "./store/index"

2.在new Vue中添加属性 ===》 store:Vuex

第四：使用共享的数据、更改共享数据

用法一（普通用法）：

1.this.$store.dispatch("V/add",value)  //add为你在actions 中定义的函数名，value为数据。此操作是改变共享的数据。

 2.this.$store.commit("V/ADD",value)   //ADD为你在mutations 中定义的函数名，value为数据。此操作是改变共享的数据。

3.获取共享数据：

 this.$store.state.V.n  //n为你在state中定义的数据名

4.页面使用共享数据：

{{$store.state.V.n}} //n为你在state中定义的数据名

用法二（通过mapState 创建共享数据计算属性）：

1.在需要使用共享数据的组件中导入mapState ==》import  {mapState}  from  "vuex"

2.在computed中使用mapState ==》

 computed:{

...mapState("V",{

x:"n"  //x为自定义计算属性名，n为共享数据的名称。

····· //可以有多个计算属性

})

}

3.页面引用 {{x}}  //x为上述自定义属性名

补充：1.如果mapState的计算属性名与共享数据名一致时可以用:···mapState("V",["n"]).通过传递数组生成计算属性。页面使用:{{n}}。2.actions和mutations的调用也可以通过mapActions和mapMutations，用法类似。推介使用数组方式。