state也就是vuex里的值，也即是整个vuex的状态，而strict和state的设置有关，如果设置strict为true，那么不能直接修改state里的值，只能通过mutation来设置
例1:
<!雕梁画栋doctype html><html lang="en"><head> <meta chart="utf-8"> <title>document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script></head><body> <div id="app">历史论文怎么写 <p>count:{{count}}</p> </div> <script> const store = new vuex.store({ state:{count:1} }) var app = new vue({ el:"#app", store, computed:{ count(){return store.state.count } } }) </script></body></html>渲染如下:
当我们在控制台修改store.state.coun里的值时页面会自动更新，例如:
此时页面自动更新了，变为了:
我们设置一个strict属性看看:例2:
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script></head><body> <div id="app"> <p>count:{{count}}</p> </div> <script> const store = new vuex.store({ state:{count:1}, strict:true //新增一个strict属性，值为true }) var app = new vue({ el:"#app", store, computed:{ count(){return store.state.count } } }) </script></body></html>此时渲染如下:
当我们在控制台输入store.state.count=2后，如下:
控制台报错了，页面渲染如下:
可以看到设置strict后，虽然能直接更改vuex里的值，但是会出现一条报错信息，即严格模式下v如何赞美别人uex会给出一条提示，提示我们只能通过mutation来修改。
源码分析
writer by:大沙漠 qq:22969969
我们直接修改state会触发更新以及strict严格模式的控制都是在vuex内部retstorevm整个函数内实现的，如下:
function retstorevm (store, state, hot) { //重新存储数据 var oldvm = store._vm; // bind store public getters store.getters = {}; //给store定义一个getters属性，值为一个对象 var wrappedgetters = store._wrappedgetters; //获取store的所有getter数组信息 var computed = {}; foreachvalue(wrappedgetters, function (fn, key) { //遍历wrappedgetters // u computed to leverage its lazy-caching mechanism computed[key] = function () { return fn(store); }; //将getter保存到computed里面 object.defineproperty(store.getters, key, { //设置store.getters的key的访问器属性 get: function () { return store._vm[key]; }, enumerable: true // for local getters }); }); // u a vue instance to store the state tree // suppress warnings just in ca the ur has added // some funky global mixins var silent = vue.config.silent; //保存vue.config.silent的配置 vue.config.silent = true; //设置vue.config.silent配置属性为true(先关闭警告) store._vm = new vue({ 黑脸娃娃的效果 //创建new vue()实例把$$state和computed变成响应式的 data: { $$state: state }, computed: computed }); vue.config.silent = silent; //将vue.config.silent复原回去情绪管理方法 // enable strict mode for new vm if (store.strict) { //初始化strore时，如果给strict传入了true enablestrictmode(store); //则调用enablestrictmode()函数 } if (oldvm) { if (hot) { // dispatch changes in all subscribed watchers // to force getter re-evaluation for hot reloading. store._withcommit(function () { oldvm._data.$$state = null; }); } vue.nexttick(function () { return oldvm.$destroy(); }); } }从上面看到vuex内部创建一个vue对象并把state设置为了data对象里，因此有响应式的功能，而如果传入了strict，则调用enablestrictmode函数，该函数实现如下:
function enablestrictmode (store) { //严格模式下，观察this._data.$$state的变化 store._vm.$watch(function () { return this._data.$$state }, function () { //如果this._data.$$state发生变化时，store._committing不为true,则报错(不是通过vuex的接口来修改时) { asrt(store._committing, "do not mutate vuex store state outside mutation handlers."); } }, { deep: true, sync: true }); }也就是调用vue.$watch去观察this._data.$$state的变化，也就是vuex里的state的变化，如果有变化且store._committing不为true则报错
store._committing是vuex里的一个属性，如果是通过mutation修改state时就会设置store._committing为true,否则store._committing为fal
本文发布于:2023-04-07 04:22:10，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/3dcaf08071d4585671fb414fb9c1e78d.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：vuex源码分析(二) state及strict属性 详解.doc
本文 PDF 下载地址：vuex源码分析(二) state及strict属性 详解.pdf
| 留言与评论（共有 0 条评论） |
